ux.form.field.SearchField 列表、树形菜单查询扩展

 //支持bind绑定store
 //列表搜索扩展，支持本地查询
 //支持树形菜单本地一级菜单查询
 Ext.define('ux.form.field.SearchField', {
     extend: 'Ext.form.field.Text',
     alias: 'widget.uxSearchfield',
     defaultBindProperty: 'store',
     mixins: ['Ext.util.StoreHolder'],
     triggers: {
         clear: {
             weight: 0,
             cls: Ext.baseCSSPrefix + 'form-clear-trigger',
             hidden: true,
             //清除搜索条件
             handler: 'clearValue',
             scope: 'this'
         },
         search: {
             weight: 1,
             cls: Ext.baseCSSPrefix + 'form-search-trigger',
             //查询
             handler: 'onSearchClick',
             scope: 'this'
         }
     },
     //查询参数
     paramName: 'query',
     //是否本地查询
     isLocal: false,
     initComponent: function () {
         var me = this,
         store = me.store;
         me.on({
             //添加监听，监听回车键
             specialkey: function (f, e) {
                 if (e.getKey() == e.ENTER) {
                     me.onSearchClick();
                 }
             },
             //监听内容改变
             //在这里监听是为了实现多个搜索控件绑定同一个store时
             //界面能够同步
             change: function (t, value) {
                 var clear = t.getTrigger('clear');
                 //根据查询条件是否存在，显示隐藏小按钮
                 if (value.length > 0) {
                     if (clear.hidden) {
                         clear.show();
                         t.updateLayout();
                     }
                 } else {
                     clear.hide();
                     t.updateLayout();
                     me.onClearClick();
                 }
             }
         });
         //如果strong是string类型，寻找对应的store
         if (Ext.isString(store)) {
             store = me.store = Ext.data.StoreManager.lookup(store);
         }
         //动态绑定store
         me.bindStore(store || 'ext-empty-store', true);
         me.callParent(arguments);
     },
     //清除value
     clearValue: function () {
         this.setValue('');
     },
     //清除过滤
     onClearClick: function () {
         //console.log('清除过滤');
         var me = this,
         activeFilter = me.activeFilter;
         if (activeFilter) {
             me.store.getFilters().remove(activeFilter);
             me.activeFilter = null;
         } else {
             me.store.clearFilter(false);
         }
     },
     //本地过滤
     localFilter: function (value) {
         var store = this.store,
             paramName = this.paramName;
 
         //first clear any current filters on the store. If there is a new value, then suppress the refresh event
         store.clearFilter(!!value);
         //check if a value is set first, as if it isnt we dont have to do anything
         //the user could have entered spaces, so we must split them so we can loop through them all
         var searches = value.split(','),
             regexps = [],
             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) {
             //树形菜单只过滤第一层
             if (record.get('depth') > 1) {
                 return true;
             }
             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(paramName));
 
                 //if it matched the first or last name, push it into the matches array
                 matched.push(didMatch);
             }
 
             return (regexps.length && matched.indexOf(true) !== -1);
         });
     },
     //过滤
     onSearchClick: function () {
         var me = this,
         value = me.getValue(),
         store,
         proxy;
         if (value.length > 0) {
             //本地还是远程过滤
             if (!me.isLocal) {
                 store = me.store;
                 store.setRemoteFilter(true);
                 // 设置代理，设置过滤参数
                 proxy = store.getProxy();
                 proxy.setFilterParam(me.paramName);
                 proxy.encodeFilters = function (filters) {
                     return filters[0].getValue();
                 }
                 // Param name is ignored here since we use custom encoding in the proxy.
                 // id is used by the Store to replace any previous filter
                 me.activeFilter = new Ext.util.Filter({
                     property: me.paramName,
                     value: value
                 });
                 me.store.getFilters().add(me.activeFilter);
             } else {
                 me.localFilter(value);
             }
         }
     },
     onDestroy: function () {
         //清除过滤条件
         var me = this,
            store = me.store;
         if (store) {
             me.onClearClick();
             me.store = null;
             //移除绑定
             me.bindStore(null);
         }
         me.callParent();
     }
 });

简单示例

 Ext.define('类名', {
     extend: 'Ext.tree.Panel',
     title: '小区',
     rootVisible : false,
     store: '数据源，可bind绑定',
     header: {
         items: [{
             //本地查询
             isLocal:true,
             xtype: 'uxSearchfield',
             //
             store: '数据源，可bind绑定',
             //
             paramName: '查询字段',
             emptyText: '请输入关键词'
         }]
     }
 });