PDA

View Full Version : How to change grid column header template in extjs 4.1



extjs.mscit
5 Apr 2013, 5:56 AM
Hi,
I want to change default header template of grid. Please, can anybody suggest config or property to change default column header?? I tried "renderTpl", "tpl", "metaRowTpl", but, all these properties are related to grid row, not header. I would be great if anybody can provide me some example or link to refer.

Please refer to below image.

42949

Many Thanks.

slemmon
8 Apr 2013, 8:41 AM
I don't know that there is a direct way to manage the structure of the column header itself - no config you can pass in to the grid. Best I could suggest is to use the CSS rendered to the column header. I realize that's not what you're looking for specifically, but I'm not seeing a way to directly manage the column header template with an optional tpl config.

extjs.mscit
9 Apr 2013, 12:26 AM
Thanks Slemmon,
So, i have to overrite a class, which will render different template, Can you please suggest me which class and which method renders column header template?
i.e "Ext.grid.header.container" OR "Ext.grid.column.Column" class have template information??
and also which method renders template??

slemmon
9 Apr 2013, 8:37 AM
Looks like the Ext.column.Column (http://docs.sencha.com/ext-js/4-2/source/Column3.html#Ext-grid-column-Column) class has the renderTpl config for the column header. That's the one you'd need to extend/override.

extjs.mscit
10 Apr 2013, 12:44 AM
I tried by overiding that, but it is related to column header text template. It does not add any header on it.


renderTpl:
'<div id="{id}-headerEl" >' +
'<div id="{id}-titleEl" {tipMarkup}class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
'<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text">' +
'{text}' +
'</span>' +
'<tpl if="!menuDisabled">'+
'<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div>'+
'</tpl>' +
'</div>' +
'<div id="{id}-filterEl" {tipMarkup}class="' + Ext.baseCSSPrefix + 'column-filter-inner">' +
'<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-filter-text">' +
'{text}' +
'</span>' +
'<tpl if="!menuDisabled">'+
'<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-filter-trigger"></div>'+
'</tpl>' +
'</div>' +
'</div>' +
'{%this.renderContainer(out,values)%}',


Please find my Extjs 3.4 attached file which works perfectly fine. I want simillar functionality to extjs 4.1 as well.:(