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: '请输入关键词'
        }]
    }
});