sencha touch 带本地搜索功能的selectfield(选择插件)

带本地搜索功能的选择插件，效果图：

在使用selectfield的过程中，数据过大时，数据加载缓慢，没有模糊查询用户体验也不好，

在selectfield的基础上上稍作修改而成，使用方式同selectfield，代码：

 Ext.define('ux.field.Select', {
     extend: 'Ext.field.Text',
     xtype: 'uxSelectfield',
     alternateClassName: 'ux.form.Select',
     requires: [
         'Ext.Panel',
         'Ext.picker.Picker',
         'Ext.data.Store',
         'Ext.data.StoreManager',
         'Ext.dataview.List'
     ],

     /**
      * @event change
      * Fires when an option selection has changed
      * @param {Ext.field.Select} this
      * @param {Mixed} newValue The new value
      * @param {Mixed} oldValue The old value
      */

     /**
      * @event focus
      * Fires when this field receives input focus. This happens both when you tap on the field and when you focus on the field by using
      * 'next' or 'tab' on a keyboard.
      *
      * Please note that this event is not very reliable on Android. For example, if your Select field is second in your form panel,
      * you cannot use the Next button to get to this select field. This functionality works as expected on iOS.
      * @param {Ext.field.Select} this This field
      * @param {Ext.event.Event} e
      */

     config: {
         /**
          * @cfg
          * @inheritdoc
          */
         ui: 'select',

         /**
          * @cfg {Boolean} useClearIcon
          * @hide
          */

         /**
          * @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 {Boolean} clearIcon
          * @hide
          * @accessor
          */
         clearIcon: false,

         /**
          * 请勿改动此配置
          */
         usePicker: false,

         /**
          * @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'
     },

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

     // @private
     initialize: function () {
         var me = this,
             component = me.getComponent();

         me.callParent();

         component.on({
             scope: me,
             masktap: 'onMaskTap'
         });

         component.doMaskTap = Ext.emptyFn;

         if (Ext.browser.is.AndroidStock2) {
             component.input.dom.disabled = true;
         }

         if (Ext.theme.is.Blackberry) {
             this.label.on({
                 scope: me,
                 tap: "onFocus"
             });
         }
     },

     getElementConfig: function () {
         if (Ext.theme.is.Blackberry) {
             var prefix = Ext.baseCSSPrefix;

             return {
                 reference: 'element',
                 className: 'x-container',
                 children: [
                     {
                         reference: 'innerElement',
                         cls: prefix + 'component-outer',
                         children: [
                             {
                                 reference: 'label',
                                 cls: prefix + 'form-label',
                                 children: [{
                                     reference: 'labelspan',
                                     tag: 'span'
                                 }]
                             }
                         ]
                     }
                 ]
             };
         } else {
             return this.callParent(arguments);
         }
     },

     /**
      * @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);
     },

     syncEmptyCls: Ext.emptyFn,

     /**
      * @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;
         this.callParent([(newValue && newValue.isModel) ? newValue.get(this.getDisplayField()) : '']);
     },

     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: 'toolbar',
                     docked: 'top',
                     items: [
                         //新增的搜索栏，用于支持模糊查询
                         {
                             xtype: 'searchfield',
                             placeHolder: '请输入关键词',
                             width:'100%',
                             clearIcon:false,
                             listeners: {
                                 keyup: 'onSearch',
                                 scope: this
                             }
                         }
                     ]
                 }, {
                     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;
     },
     //进行模糊查询
     onSearchKeyUp: function (value) {
         //得到数据仓库和搜索关键词
         var store = this.getStore();

         //如果是新的关键词，则清除过滤
         store.clearFilter(!!value);
         //检查值是否存在
         if (value) {
             //the user could have entered spaces, so we must split them so we can loop through them all
             var key = this.getDisplayField(),
              searches = value.split(','),
                 regexps = [],
                 //获取现实值的name
                 i, regex;

             //loop them all
             for (i = 0; i < searches.length; i++) {
                 //if it is nothing, continue
                 if (!searches[i]) continue;

                 regex = searches[i].trim();
                 regex = regex.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

                 //if found, create a new regular expression which is case insenstive
                 regexps.push(new RegExp(regex.trim(), 'i'));
             }

             //now filter the store by passing a method
             //the passed method will be called for each record in the store
             store.filter(function (record) {
                 var matched = [];

                 //loop through each of the regular expressions
                 for (i = 0; i < regexps.length; i++) {
                     var search = regexps[i],
                         didMatch = search.test(record.get(key));

                     //if it matched the first or last name, push it into the matches array
                     matched.push(didMatch);
                 }

                 return (regexps.length && matched.indexOf(true) !== -1);
             });
         }
     },
     //进行模糊查询
     onSearch: function (field) {
         this.onSearchKeyUp(field.getValue());
     },
     // @private
     onMaskTap: function () {
         this.onFocus();

         return false;
     },

     /**
      * Shows the picker for the select field, 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.getReadOnly()) {
             return;
         }
         me.isFocused = true;

         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 record = this.getRecord(),
                 text='请搜索';
             if (record) {
                  text = record.get(this.getDisplayField());
             }
             this.onSearchKeyUp(text);

             var listPanel = me.getTabletPicker(),
                 list = listPanel.down('list'),
                 index, record;

             if (!listPanel.getParent()) {
                 Ext.Viewport.add(listPanel);
             }
             //为搜索栏赋值
             listPanel.down('searchfield').setValue(text);
             listPanel.showBy(me.getComponent(), null);
             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);
         }
     },

     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);
     },

     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.setValue(store.getAt(0));
                 }
             }
         }
     },

     /**
      * @private
      */
     doSetDisabled: function (disabled) {
         var component = this.getComponent();
         if (component) {
             component.setDisabled(disabled);
         }
         Ext.Component.prototype.doSetDisabled.apply(this, arguments);
     },

     /**
      * @private
      */
     setDisabled: function () {
         Ext.Component.prototype.setDisabled.apply(this, arguments);
     },

     // @private
     updateLabelWidth: function () {
         if (Ext.theme.is.Blackberry) {
             return;
         } else {
             this.callParent(arguments);
         }
     },

     // @private
     updateLabelAlign: function () {
         if (Ext.theme.is.Blackberry) {
             return;
         } else {
             this.callParent(arguments);
         }
     },

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

         if (me.getAutoSelect()) {
             var store = me.getStore();

             record = (me.originalValue) ? me.originalValue : store.getAt(0);
         } else {
             var usePicker = me.getUsePicker(),
                 picker = usePicker ? me.picker : me.listPanel;

             if (picker) {
                 picker = picker.child(usePicker ? 'pickerslot' : 'dataview');

                 picker.deselectAll();
             }

             record = null;
         }

         me.setValue(record);

         return me;
     },

     onFocus: function (e) {
         if (this.getDisabled()) {
             return false;
         }
         var component = this.getComponent();
         this.fireEvent('focus', this, e);

         if (Ext.os.is.Android4) {
             component.input.dom.focus();
         }
         component.input.dom.blur();

         this.isFocused = true;

         this.showPicker();
     },

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

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

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