I would add a textfield to the column header of a Ext.grid.Panel

[eternasparta]

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 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: prova.png Could anyone help me? Thank you

[sriram139]

You can try adding html text field to the column text as below:

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

[eternasparta]

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...

[eternasparta]

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 */]