/** * @class Ext.picker.Picker * @extend Ext.Sheet * @alias widget.picker * * A general picker class. {@link Ext.picker.Slot}s are used to organize multiple scrollable slots into a single picker. {@link #slots} is * the only necessary prop. * * The primary {@link #slots} props are: * * - `name`: The name of the slot (will be the key when using {@link #getValues} in this {@link Ext.picker.Picker}). * - `title`: The title of this slot (if {@link #useTitles} is set to `true`). * - `data`/`store`: The data or store to use for this slot. * * ## Example * * @example packages=[reactor] * import React, { Component } from 'react'; * import { ExtReact, Container, Picker, Button } from '@sencha/ext-react'; * * export default class MyExample extends Component { * * showPicker = () => this.picker.show(); * * render() { * return ( * <ExtReact> * <Container> * <Button ui="action" handler={this.showPicker} text="Show Picker"/> * <Picker * ref={picker => this.picker = picker} * slots={[ * { * name: 'limit_speed', * title: 'Speed', * data: [ * {text: '50 KB/s', value: 50}, * {text: '100 KB/s', value: 100}, * {text: '200 KB/s', value: 200}, * {text: '300 KB/s', value: 300} * ] * } * ]} * /> * </Container> * </ExtReact> * ) * } * * } */ /** * @event pick * Fired when a slot has been picked * @param {Ext.Picker} this This Picker. * @param {Object} values The values of this picker's slots, in `{name:'value'}` format. * @param {Ext.picker.Slot} slot An instance of Ext.Picker.Slot that has been picked. */ /** * @event change * Fired when the value of this picker has changed the Done button has been pressed. * @param {Ext.picker.Picker} this This Picker. * @param {Object} values The values of this picker's slots, in `{name:'value'}` format. */ /** * @event cancel * Fired when the cancel button is tapped and the values are reverted back to * what they were. * @param {Ext.Picker} this This Picker. */ /** * @cfg {String/Mixed} [doneButton=true] * Can be either: * * - A {String} text to be used on the Done button. * - An {Object} as prop for {@link Ext.Button}. * - `false` or `null` to hide it. * @accessor */ /** * @cfg {String/Mixed} [cancelButton=true] * Can be either: * * - A {String} text to be used on the Cancel button. * - An {Object} as a prop for {@link Ext.Button}. * - `false` or `null` to hide it. * @accessor */ /** * @cfg {Boolean} [useTitles=false] * Generate a title header for each individual slot and use * the title prop of the slot. * @accessor */ /** * @cfg {Array} [slots=null] * An array of slot props. * * - `name` {String} - Name of the slot * - `data` {Array} - An array of text/value pairs in the format `{text: 'myKey', value: 'myValue'}` * - `title` {String} - Title of the slot. This is used in conjunction with `useTitles: true`. * * @accessor */ /** * @cfg {String/Number} [value=null] * The value to initialize the picker with. * @accessor */ /** * @cfg {Number} [height=220] * The height of the picker. * @accessor */ /** * @cfg layout * @inheritdoc * @accessor */ /** * @cfg {Boolean} [centered=false] * @hide */ /** * @cfg [left=0] * @inheritdoc */ /** * @cfg [right=0] * @inheritdoc */ /** * @cfg [bottom=0] * @inheritdoc */ /** * @cfg {Ext.TitleBar/Ext.Toolbar/Object} toolbar * The toolbar which contains the {@link #doneButton} and {@link #cancelButton} buttons. * You can override this if you wish, and add your own props. Just ensure that you take into account * the {@link #doneButton} and {@link #cancelButton} props. * * The default xtype is a {@link Ext.TitleBar}: * * toolbar: { * items: [ * { * xtype: 'button', * text: 'Left', * align: 'left' * }, * { * xtype: 'button', * text: 'Right', * align: 'left' * } * ] * } * * Or to use a {@link Ext.Toolbar instead}: * * toolbar: { * xtype: 'toolbar', * items: [ * { * xtype: 'button', * text: 'Left' * }, * { * xtype: 'button', * text: 'Left Two' * } * ] * } * * @accessor */ /** * @method setValue * Sets the values of the pickers slots. * @param {Object} values The values in a {name:'value'} format. * @param {Boolean} animated `true` to animate setting the values. * @return {Ext.Picker} this This picker. */ /** * @method getValue * Returns the values of each of the pickers slots * @return {Object} The values of the pickers slots */ /** * @method getValues * Returns the values of each of the pickers slots. * @return {Object} The values of the pickers slots. */