/**
 * @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
 * 
 * ```HTML
 * @example({tab: 1})
 * <ext-container>
 *     <ext-button ui="action" ontap="picker.showPicker" text="Show Picker"></ext-button>
 *     <ext-picker
 *         onready="picker.pickerReady"
 *             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"}
 *                             ]                              
 *                     }]'
 *      >
 *    </ext-picker>
 * </ext-container>
 * ```
 *
 * ```javascript
 * @example({tab: 2, packages: ['ext-web-components']})
 * import '@sencha/ext-web-components/dist/ext-container.component';
 * import '@sencha/ext-web-components/dist/ext-button.component';
 * import '@sencha/ext-web-components/dist/ext-picker.component';
 * 
 * export default class PickerComponent {
 *     pickerReady = (event) => {
 *         this.pickerCmp = event.detail.cmp;
 *     }
 * 
 *     showPicker = () => {
 *          this.pickerCmp.show();
 *     }
 * }
 * window.picker = new PickerComponent();
 * ```
 */
 
/**
 * @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.
 */