sencha touch Button Select（点击按钮进行选择）扩展

此扩展基于官方selectfield控件修改而来，变动并不大，使用方法类似。

代码如下：

 Ext.define('ux.SelectBtn', {
     extend: 'Ext.Button',
     xtype: 'selectBtn',
     alternateClassName: 'selectBtn',
     requires: [
         'Ext.Panel',
         'Ext.picker.Picker',
         'Ext.data.Store',
         'Ext.data.StoreManager',
         'Ext.dataview.List'
     ],
     config: {
         /**
          * @cfg
          * @inheritdoc
          */
         ui: 'select',

         /**
          * @cfg {String/Number} valueField The underlying {@link Ext.data.Field#name data value name} (or numeric Array index) to bind to this
          * Select control.
          * @accessor
          */
         valueField: 'value',

         /**
          * @cfg {String/Number} displayField The underlying {@link Ext.data.Field#name data value name} (or numeric Array index) to bind to this
          * Select control. This resolved value is the visibly rendered value of the available selection options.
          * @accessor
          */
         displayField: 'text',

         /**
          * @cfg {Ext.data.Store/Object/String} store The store to provide selection options data.
          * Either a Store instance, configuration object or store ID.
          * @accessor
          */
         store: null,

         /**
          * @cfg {Array} options An array of select options.
          *
          *     [
          *         {text: 'First Option',  value: 'first'},
          *         {text: 'Second Option', value: 'second'},
          *         {text: 'Third Option',  value: 'third'}
          *     ]
          *
          * __Note:__ Option object member names should correspond with defined {@link #valueField valueField} and {@link #displayField displayField} values.
          * This config will be ignored if a {@link #store store} instance is provided.
          * @accessor
          */
         options: null,

         /**
          * @cfg {String} hiddenName Specify a `hiddenName` if you're using the {@link Ext.form.Panel#standardSubmit standardSubmit} option.
          * This name will be used to post the underlying value of the select to the server.
          * @accessor
          */
         hiddenName: null,

         /**
          * @cfg {Object} component
          * @accessor
          * @hide
          */
         component: {
             useMask: true
         },

         /**
          * @cfg {String/Boolean} usePicker
          * `true` if you want this component to always use a {@link Ext.picker.Picker}.
          * `false` if you want it to use a popup overlay {@link Ext.List}.
          * `auto` if you want to show a {@link Ext.picker.Picker} only on phones.
          */
         usePicker: 'auto',

         /**
          * @cfg {Boolean} autoSelect
          * `true` to auto select the first value in the {@link #store} or {@link #options} when they are changed. Only happens when
          * the {@link #value} is set to `null`.
          */
         autoSelect: true,

         /**
          * @cfg {Object} defaultPhonePickerConfig
          * The default configuration for the picker component when you are on a phone.
          */
         defaultPhonePickerConfig: null,

         /**
          * @cfg {Object} defaultTabletPickerConfig
          * The default configuration for the picker component when you are on a tablet.
          */
         defaultTabletPickerConfig: null,

         /**
          * @cfg
          * @inheritdoc
          */
         name: 'picker',

         /**
          * @cfg {String} pickerSlotAlign
          * The alignment of text in the picker created by this Select
          * @private
          */
         pickerSlotAlign: 'center',
         value:null
     },

     platformConfig: [
         {
             theme: ['Windows'],
             pickerSlotAlign: 'left'
         },
         {
             theme: ['Tizen'],
             usePicker: false
         }
     ],

     // @private
     initialize: function () {
         var me = this;
         me.callParent();
         //监听按钮点击事件
         this.on({
             scope: me,
             tap: "showPicker"
         });
     },

     /**
      * @private
      */
     updateDefaultPhonePickerConfig: function (newConfig) {
         var picker = this.picker;
         if (picker) {
             picker.setConfig(newConfig);
         }
     },

     /**
      * @private
      */
     updateDefaultTabletPickerConfig: function (newConfig) {
         var listPanel = this.listPanel;
         if (listPanel) {
             listPanel.setConfig(newConfig);
         }
     },

     /**
      * @private
      * Checks if the value is `auto`. If it is, it only uses the picker if the current device type
      * is a phone.
      */
     applyUsePicker: function (usePicker) {
         if (usePicker == "auto") {
             usePicker = (Ext.os.deviceType == 'Phone');
         }

         return Boolean(usePicker);
     },

     /**
      * @private
      */
     applyValue: function (value) {
         var record = value,
             index, store;

         //we call this so that the options configruation gets intiailized, so that a store exists, and we can
         //find the correct value
         this.getOptions();

         store = this.getStore();

         if ((value != undefined && !value.isModel) && store) {
             index = store.find(this.getValueField(), value, null, null, null, true);

             if (index == -1) {
                 index = store.find(this.getDisplayField(), value, null, null, null, true);
             }

             record = store.getAt(index);
         }

         return record;
     },

     updateValue: function (newValue, oldValue) {
         this.record = newValue;
     },

     getValue: function () {
         var record = this.record;
         return (record && record.isModel) ? record.get(this.getValueField()) : null;
     },

     /**
      * Returns the current selected {@link Ext.data.Model record} instance selected in this field.
      * @return {Ext.data.Model} the record.
      */
     getRecord: function () {
         return this.record;
     },

     // @private
     getPhonePicker: function () {
         var config = this.getDefaultPhonePickerConfig();

         if (!this.picker) {
             this.picker = Ext.create('Ext.picker.Picker', Ext.apply({
                 slots: [
                     {
                         align: this.getPickerSlotAlign(),
                         name: this.getName(),
                         valueField: this.getValueField(),
                         displayField: this.getDisplayField(),
                         value: this.getValue(),
                         store: this.getStore()
                     }
                 ],
                 listeners: {
                     change: this.onPickerChange,
                     scope: this
                 }
             }, config));
         }

         return this.picker;
     },

     // @private
     getTabletPicker: function () {
         var config = this.getDefaultTabletPickerConfig();

         if (!this.listPanel) {
             this.listPanel = Ext.create('Ext.Panel', Ext.apply({
                 left: 0,
                 top: 0,
                 modal: true,
                 cls: Ext.baseCSSPrefix + 'select-overlay',
                 layout: 'fit',
                 hideOnMaskTap: true,
                 width: Ext.os.is.Phone ? '14em' : '18em',
                 height: (Ext.os.is.BlackBerry && Ext.os.version.getMajor() === 10) ? '12em' : (Ext.os.is.Phone ? '12.5em' : '22em'),
                 items: {
                     xtype: 'list',
                     store: this.getStore(),
                     itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
                     listeners: {
                         select: this.onListSelect,
                         itemtap: this.onListTap,
                         scope: this
                     }
                 }
             }, config));
         }

         return this.listPanel;
     },

     /**
      * 显示选择器, whether that is a {@link Ext.picker.Picker} or a simple
      * {@link Ext.List list}.
      */
     showPicker: function () {
         var me = this,
             store = me.getStore(),
             value = me.getValue();
         //check if the store is empty, if it is, return
         if (!store || store.getCount() === 0) {
             return;
         }

         if (me.getUsePicker()) {
             var picker = me.getPhonePicker(),
                 name = me.getName(),
                 pickerValue = {};

             pickerValue[name] = value;
             picker.setValue(pickerValue);

             if (!picker.getParent()) {
                 Ext.Viewport.add(picker);
             }

             picker.show();
         } else {
             var listPanel = me.getTabletPicker(),
                 list = listPanel.down('list'),
                 index, record;

             if (!listPanel.getParent()) {
                 Ext.Viewport.add(listPanel);
             }
             //基于按钮显示
             listPanel.showBy(me);

             if (value || me.getAutoSelect()) {
                 store = list.getStore();
                 index = store.find(me.getValueField(), value, null, null, null, true);
                 record = store.getAt(index);

                 if (record) {
                     list.select(record, null, true);
                 }
             }
         }
     },

     // @private
     onListSelect: function (item, record) {
         var me = this;
         if (record) {
             me.setValue(record);
             //选择成功触发事件
             this.fireEvent('selecSuccess', this, this.getValue(), record);
         }
     },

     onListTap: function () {
         this.listPanel.hide({
             type: 'fade',
             out: true,
             scope: this
         });
     },

     // @private
     onPickerChange: function (picker, value) {
         var me = this,
             newValue = value[me.getName()],
             store = me.getStore(),
             index = store.find(me.getValueField(), newValue, null, null, null, true),
             record = store.getAt(index);

         me.setValue(record);
         //选择成功触发事件
         this.fireEvent('selecSuccess', this, this.getValue(), record);
     },

     onChange: function (component, newValue, oldValue) {
         var me = this,
             store = me.getStore(),
             index = (store) ? store.find(me.getDisplayField(), oldValue, null, null, null, true) : -1,
             valueField = me.getValueField(),
             record = (store) ? store.getAt(index) : null;

         oldValue = (record) ? record.get(valueField) : null;

         me.fireEvent('change', me, me.getValue(), oldValue);
     },

     /**
      * Updates the underlying `<options>` list with new values.
      *
      * @param {Array} newOptions An array of options configurations to insert or append.
      *
      *     selectBox.setOptions([
      *         {text: 'First Option',  value: 'first'},
      *         {text: 'Second Option', value: 'second'},
      *         {text: 'Third Option',  value: 'third'}
      *     ]).setValue('third');
      *
      * __Note:__ option object member names should correspond with defined {@link #valueField valueField} and
      * {@link #displayField displayField} values.
      *
      * @return {Ext.field.Select} this
      */
     updateOptions: function (newOptions) {
         var store = this.getStore();

         if (!store) {
             this.setStore(true);
             store = this._store;
         }

         if (!newOptions) {
             store.clearData();
         }
         else {
             store.setData(newOptions);
             this.onStoreDataChanged(store);
         }
         return this;
     },

     applyStore: function (store) {
         if (store === true) {
             store = Ext.create('Ext.data.Store', {
                 fields: [this.getValueField(), this.getDisplayField()],
                 autoDestroy: true
             });
         }

         if (store) {
             store = Ext.data.StoreManager.lookup(store);

             store.on({
                 scope: this,
                 addrecords: 'onStoreDataChanged',
                 removerecords: 'onStoreDataChanged',
                 updaterecord: 'onStoreDataChanged',
                 refresh: 'onStoreDataChanged'
             });
         }

         return store;
     },

     updateStore: function (newStore) {
         if (newStore) {
             this.onStoreDataChanged(newStore);
         }

         if (this.getUsePicker() && this.picker) {
             this.picker.down('pickerslot').setStore(newStore);
         } else if (this.listPanel) {
             this.listPanel.down('dataview').setStore(newStore);
         }
     },

     /**
      * Called when the internal {@link #store}'s data has changed.
      */
     onStoreDataChanged: function (store) {
         var initialConfig = this.getInitialConfig(),
             value = this.getValue();

         if (value || value == 0) {
             this.updateValue(this.applyValue(value));
         }

         if (this.getValue() === null) {
             if (initialConfig.hasOwnProperty('value')) {
                 this.setValue(initialConfig.value);
             }

             if (this.getValue() === null && this.getAutoSelect()) {
                 if (store.getCount() > 0) {
                     this.setRecord(store.getAt(0));
                 }
             }
         }
     },

     /**
      * Resets the Select field to the value of the first record in the store.
      * @return {Ext.field.Select} this
      * @chainable
      */
     reset: function () {
         var store = this.getStore(),
             record = (this.originalValue) ? this.originalValue : store.getAt(0);

         if (store && record) {
             this.setValue(record);
         }

         return this;
     },

     destroy: function () {
         this.callParent(arguments);
         var store = this.getStore();

         if (store && store.getAutoDestroy()) {
             Ext.destroy(store);
         }

         Ext.destroy(this.listPanel, this.picker);
     }
 });

使用示例

引用：

    requires: ['ux.SelectBtn'],

使用（可以参考官方selectfield控件用法）：

 {
                 xtype: 'selectBtn',
                 text: '分享',
                 align: 'right',
                 ui: 'decline',
                 valueField: 'name',
                 displayField: 'name',
                 action:'share',
                 store: 'shareList'
 }

控制层监听

引用：

 refs: {
             shareBtn: 'button[action=share]'
         }

监听(选择成功)：

 control: {
             shareBtn: {
                 selecSuccess: function (t, value, record) {
                     console.log(value,record);
                 }
             }
 }

效果图(点击按钮后):