1. #1
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    55
    Vote Rating
    1
    extjs.mscit is on a distinguished road

      0  

    Default Unanswered: How to change grid column header template in extjs 4.1

    Unanswered: How to change grid column header template in extjs 4.1


    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.

    Untitled.png

    Many Thanks.

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    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.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    55
    Vote Rating
    1
    extjs.mscit is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,470
    Answers
    442
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Looks like the Ext.column.Column class has the renderTpl config for the column header. That's the one you'd need to extend/override.

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    55
    Vote Rating
    1
    extjs.mscit is on a distinguished road

      0  

    Default


    I tried by overiding that, but it is related to column header text template. It does not add any header on it.

    Code:
    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.
    Attached Files

Thread Participants: 1

Tags for this Thread