How to add filter header to each grid column extjs 4.1

Question

I have implemented grid filters in Extjs 3.4, but now I am migrating to extjs 4.1. Can anyone show me how to implement grid filters in extjs 4.1?

(As a new user, I am unable to upload an image to show an example)

extjs user extjs user · Accepted Answer · 2013-08-27T13:10:11

The best way is to define a column component.

Ext.define('Ext.ux.grid.MyColumn',{

extend: 'Ext.grid.column.Column',

alias: 'widget.mycolumn',

childEls: [
    'headerEl', 'titleEl', 'filterEl', 'triggerEl', 'headerTextEl', 'filterTextEl'
],

renderTpl:
    'change it , and make your own TPL',

initComponent: function () {
// change or declare new data if you want.
// me.callParent(arguments);
// I have modified lot. so, I skip initComponent of Ext.grid.column.column
me.superclass.superclass.initComponent.call(this); // directly call parents parent class.
}

});


USAGE : 
columns: [
    {
         xtype: 'mycolumn',
         itemId: 'sfsfsfsfsf', text: 'My filter column'
    }
]

How to add filter header to each grid column extjs 4.1

2 Answers