View Full Version : I would add a textfield to the column header of a Ext.grid.Panel

31 Jan 2013, 3:31 AM
hello all,
I'm making a simple page with a Grid like this http://docs.sencha.com/ext-js/4-1/#!/example/grid/grid-plugins.html

I (http://docs.sencha.com/ext-js/4-1/#!/example/grid/grid-plugins.html) would like to add inside the column header a textbox (or more generally an object that is not simply "text").

It should look like this image: 41585

Could anyone help me?
Thank you

1 Feb 2013, 2:49 PM
You can try adding html text field to the column text as below:

columns: [{
text: 'Name <input type=text/>',
dataIndex: 'name'

4 Feb 2013, 6:54 AM
Good solution (thank you!!!!), but this create an "html" field, and i think that it's not simple to interact with sencha framework. For example i think is difficult to get focus on it on click event, isn't?
Is there any other solution? For example to add:

xtype: 'textfield' //or other type


or something similar...

5 Feb 2013, 1:28 AM
Add in your grid class the following rows:

- plugin for the grid:

plugins: [Ext.create('Ext.ux.grid.plugin.HeaderFilters')/*, ... other plugins here */]

- column configuration:

columns:[{ /*other configurations for your column:*/
header: 'Accepted', dataIndex: 'accepted', flex: 1,
/*filter plugin configuration:*/
filterable: true, filter:{xtype: 'textfield' /* i've used a simple textbox*/}}
/*, other columns here */]