extjs 通用搜索框

先来张效果图：

采用triggerfield组件实现。

{
                            xtype: 'triggerfield',
                            onTrigger1Click: function() {
                                var me = this;
                                if (me.hasSearch) {
                                    me.setValue('');
                                    me.store.clearFilter();
                                    me.hasSearch = false;
                                    me.triggerCell.item(0).setDisplayed(false);
                                    me.updateLayout();
                                }
                            },
                            onTrigger2Click: function() {
                                var me = this,
                                    value = me.getValue();

                                if (value.length > 0) {
                                    me.store.clearFilter();
                                    me.store.filter({
                                        filterFn: function(item) {//配置你要在表格中过滤的列的dataIndex
                                            return item.get('postQualityName').indexOf(value) >= 0;
                                        }
                                    });
                                    me.hasSearch = true;
                                    me.triggerCell.item(0).setDisplayed(true);
                                    me.updateLayout();
                                }
                            },
                            trigger1Cls: 'x-form-clear-trigger',
                            trigger2Cls: 'x-form-search-trigger',
                            store: 'Person4Select',//或者在onTriggerfieldAfterRender1111中查找grid 的store  paramName: 'query',
                            hasSearch: 'false',
                            width: 250,
                            fieldLabel: '指标名称',
                            labelAlign: 'right',
                            labelWidth: 55,
                            selectOnFocus: true,
                            listeners: {
                                afterrender: {
                                    fn: me.onTriggerfieldAfterRender1111,
                                    scope: me
                                },
                                specialkey: {
                                    fn: me.onTriggerfieldSpecialkey1111,
                                    scope: me
                                }
                            }
                        }

onTriggerfieldAfterRender1111 和 onTriggerfieldSpecialkey1111

onTriggerfieldAfterRender1111: function(component, eOpts) {
        var me = component;
        me.triggerCell.item(0).setDisplayed(false);
        me.store = me.ownerCt.ownerCt.down('#postQuality4PostQuality').getStore();//查找grid的store
        if(typeof(me.store.isStore) == 'undefined') {
            me.store = Ext.getStore(me.store);
        }
        me.store.remoteFilter = false;//如果有需要可以改为true,这样可以将数据发送到后天，以便远程查询

        if (!me.store.proxy.hasOwnProperty('filterParam')) {
            me.store.proxy.filterParam = me.paramName;
        }
        me.store.proxy.encodeFilters = function(filters) {
            return filters[0].value;
        };
    },

    onTriggerfieldSpecialkey1111: function(field, e, eOpts) {
        if (e.getKey() == e.ENTER) {
            field.onTrigger2Click();
        }
    }

欢迎加入技术讨论群 ：219805927     

你也可以扫描二维码加入该群

原文请移步： extjs 通用搜索框

本博客文章除特别声明，全部都是原创！
转载请注明： 转载自“争一代雄风” （www.wenhaozhong.com）