ExtJS4.0 分享GridHeaderFilters插件

公司有需求 ,因为初学extjs ,  所以去ExtJS的官方论坛翻了翻  找到一个指定列查询的很方便的插件

 

贴下原文的地址:

http://www.sencha.com/forum/showthread.php?150918-Grid-Header-Filters&p=660276#post660276

 

效果图:

 

 

 

 

 

 

附件里面有小示例

 

 

 

主要就是:

 

   引入插件

 

plugins: [
                Ext.create('Ext.ux.grid.GridHeaderFilters')
        ,
                rowEditing
        ]

 

 

   头部按钮

 

 dockedItems: [
        {
                 xtype: 'toolbar',
                        dock: 'top',
                        items: [
                            {
                                xtype: 'button',
                                text: 'Reset Filters',
                                handler: function(){
                                    grid.resetHeaderFilters();
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Clear Filters',
                                handler: function(){
                                    grid.clearHeaderFilters();
                                }
                            },
                            {
                                xtype: 'button',
                                text: 'Apply Filters',
                                handler: function(){
                                    grid.applyHeaderFilters();
                                }
                            }
                        ]
        }]

 

   定义columns的时候 指定Filter

 

{
			dataIndex: 'name',
			flex: 1,
			text: 'Name',
			allowBlank: false,
			field: {
				type: 'textfield',
				allowBlank: false
			},
            filter: {
                xtype: 'textfield'
//                filterName: 'name',
//                filterLabel: 'Abcd'
            }
   		}