Question

我有一个网格，里面有很多记录。所以我想在每个列标题中添加过滤器以轻松过滤所需的数据。我已经看到了sencha文档中给出的例子。但是如何在Extjs 4.2版本中实现它。如何在其中使用UX类？有插件吗？

我非常感谢你。

请帮帮我。

阿南德

Answer 1

这是一个例子：

Ext.define('Webdesktop.view.admin.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.admin_casoslist',
initComponent: function() {
    var me = this,
    filters = {
        ftype: 'filters',
        encode: false,
        local: true
    };

    Ext.apply(me, {
        title: 'gridTitle',
        store: List_CasSos_Store,

        filterable: true,
        features: [filters],
        closable: true, // fixme: need to set here, because has no effect in tabpanel defaults configuration
        autoScroll: true,
        columns: {
            items:[
            {
                text: 'header1',
                filter: {
                    type: 'string'
                },
                flex: 1,
                dataIndex: 'relation_patron_paraine'
            },{
                text:'header2',
                filter: {
                    type: 'list',
                    options: ['case4', 'case3', 'case2', 'case1']
                },
                hidden:true,
                flex: 1,
                dataIndex: 'etatsante'
            },{
                text:'header3',
                filter: {
                    type: 'numeric'
                },
                hidden:true,
                flex: 1,
                dataIndex: 'revenumnsuel'
            }
            ],
            defaults : {
                align: 'center'
            }
        }
    });
    me.callParent();
}

在控制器中：

uses: [
   'Webdesktop.view.admin.List',
    ...
   'Ext.ux.grid.FiltersFeature'
    ]

Answer 2

您需要将其添加到网格配置中：

plugins: [{
  ptype: 'gridfilters'
}],

然后在每一栏中：

filter: {type: 'string', dataIndex: 'passengerFullName'},

请注意，过滤器依赖于存储，无论它是远程过滤器还是本地过滤器。

有关详细信息，请参阅此处：http://docs.sencha.com/extjs/6.0.2-classic/Ext.grid.filters.Filters.html

Answer 3

要在grid的标头中使用过滤器，您需要声明过滤器数组，然后为网格提供范围。然后写

this.filters = new Ext.ux.grid.GridFilters({
            filters:this.filter
        }) ;

为此提供插件

this.plugins = [this.filters];

添加列写入的位置

gridEl.filter{
        type: 'list',
        dataIndex: "DATAINDEX",
        local : local,
        dataForFilter : data
    };

Answer 4

捕获“列单击”列的一个解决方案是，获取要过滤的参数，并在函数中将此过滤器放在网格存储上。

列示例

{
    header      : "email",
    dataIndex   : 'email',
    listeners : {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ 
                storeGrid.filter("email", /\.com$/); // email
                            storeGrid.sort('myField', 'ASC');
            }
        }
    }
},

Sencha过滤器：filter store

Sencha排序：sort store data

如何在extjs中的网格列标题中添加过滤器？

4 个答案: