extjs 通用搜索框

2019独角兽企业重金招聘Python工程师标准>>>

先来张效果图：

采用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) {
                                            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',
                            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();
        if(typeof(me.store.isStore) == 'undefined') {
            me.store = Ext.getStore(me.store);
        }
        me.store.remoteFilter = false;


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

原文请移步：争一代雄风 » extjs 通用搜索框

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

转载于:https://my.oschina.net/zhongwenhao/blog/369990