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

编程入门行业动态更新时间:2024-10-26 00:18:15

本文介绍了如何在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(); }