extjs 通用搜索框

最新推荐文章于 2016-06-02 17:50:00 发布

争一代雄风

最新推荐文章于 2016-06-02 17:50:00 发布

阅读量1.1k

点赞数

分类专栏： extjs 文章标签： extjs 搜索

本文链接：https://blog.csdn.net/jxlgzwh/article/details/42963775

版权

extjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

先来张效果图：

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