PDA

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



eternasparta
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

sriram139
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'
}

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

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