Extjs Grid 表头列名过滤

1. 需求

    Ext.grid.Panel中,加入filter plagin后会在列的右下角出现一个菜单,但操作不便,希望能直接在表头的列名位置输入过滤。

    

2. 解决方案

  首先,新建一个Ext.ux.SearchTrigger.js,对于Extjs6放到  \ext\classic\classic\src\ux 下,Ext.ux.SearchTrigger代码:

Ext.define('Ext.ux.SearchTrigger', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.searchtrigger',
    margin:0,
    triggers:{
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function() {
                this.setValue('')
                if(!this.autoSearch) this.setFilter(this.up().dataIndex, '')
            }
        }
    },
    setFilter: function(filterId, value){
        var store = this.up('grid').getStore();
        if(value){
            store.removeFilter(filterId, false)
            var filter = {id: filterId, property: filterId, value: value};
            if(this.anyMatch) filter.anyMatch = this.anyMatch
            if(this.caseSensitive) filter.caseSensitive = this.caseSensitive
            if(this.exactMatch) filter.exactMatch = this.exactMatch
            if(this.operator) filter.operator = this.operator
            console.log(this.anyMatch, filter)
            store.addFilter(filter)
        } else {
            store.filters.removeAtKey(filterId)
            //store.reload()
        }
    },
    listeners: {
        render: function(){
            var me = this;
            me.ownerCt.on('resize', function(){
                me.setWidth(this.getEl().getWidth());
            })
        },
        change: function() {
            if(this.autoSearch) this.setFilter(this.up().dataIndex, this.getValue())
        }
    }
})

  然后,在grid的列中使用searchtrigger

            {
                xtype: 'grid',
                flex: 1,
                columns: [{ 
                    text: ' ', 
                    dataIndex: 'name', 
                    flex: 1,
                    sortable:false ,
                    layout:'fit',
                    items:[{
                        xtype: 'searchtrigger',
                        width: 240,
                        operator:'like',
                        autoSearch: true
                    }]
                }],
                plugins:[{
                    ptype:'gridfilters'
                }]
            }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值