如何在extjs的网格列标题中添加过滤器？ [英] How to add filters in grid column headers in extjs?

问题描述

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

我非常感谢你。

请帮助我。 >

Anand

解决方案

这是一个例子：

  Ext.define（'Webdesktop.view.admin.List'，{
 extends：'Ext.grid.Panel'，
别名：'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，
功能：[filters]，
 closable：true，// fixme：需要在这里设置，因为在tabpanel默认配置中没有任何效果
 autoScroll ：true，
 columns：{
 items：[
 {
 text：'header1'，
 filter ：{
 type：'string'
}，
 flex：1，
 dataIndex：'relation_patron_paraine'
}，{
 text：'header2' ，
过滤器：{
 type：'list'，
 options：['case4'，'case3'，'case2'，'case1'] 
}，
隐藏：true，
 flex：1，
 dataIndex：'etatsante'
}，{
文本：'header3'，
过滤器：{
键入：'numeric'
}，
 hidden：true，
 flex：1，
 dataIndex：'revenumnsuel'
} 
]，
默认值：{
 align：'center'
} 
} 
}）; 
 me.callParent（）; 
} 
  

在控制器中：

 使用：[
'Webdesktop.view.admin.List'，
 ... 
'Ext.ux.grid.FiltersFeature'
] 
  

I have a grid with lots of records in it. so I want to add filters in each column header to filter the required data easily. I have seen the example given in the sencha docs. But How to implement it in the Extjs 4.2 version. How to use UX classes in it? Is there any plugin available?

I am greatly thankful to you.

Please help me.

Anand

解决方案

This is an example:

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

In the controller:

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

这篇关于如何在extjs的网格列标题中添加过滤器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！