1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    0
    gallyamov is on a distinguished road

      0  

    Default Customizing ext.grid.panel header template

    Customizing ext.grid.panel header template


    I want to set xtemplate for header of Ext.grid.panel. I tried:

    Code:
    Ext.define('FrontEnd.view.viewer.controls.ContractPrintFormList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.contractprintformlist',
    store: 'ContractPrintForms',
    header: {
        xtype: 'header',
        tpl: Ext.create('Ext.XTemplate',
           '<div class="contract-data-hr">&nbsp;</div>',
            '<div class="contract-data">',
            '<span class="contract-data">',
            '<span class="contract-data-text"><b>Тестовое название</b></span>',
           '</span>',
           '</div>')
        },
    columns: [
        { header: 'Наименование', dataIndex: 'Name', flex: 1 },
        {
            header: 'Загрузить',
            dataIndex: 'Url',
        }
    ],
    });
    But the header is not displayed. I don't know how to apply custom template. Has anyone done something like this?

  2. #2
    Sencha User
    Join Date
    Nov 2012
    Location
    Russia
    Posts
    34
    Vote Rating
    4
    Ilay is on a distinguished road

      0  

    Default


    Maybe you configure a columns tpl?
    Use a renderTpl of grid columns.
    The default tpl in source code is :
    Code:
    renderTpl:
            '<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>' +         '{%this.renderContainer(out,values)%}',

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    0
    gallyamov is on a distinguished road

      0  

    Default


    Thanks for your answer, Ilay. But I want to change style of the header for grid, not columns.

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Location
    Russia
    Posts
    34
    Vote Rating
    4
    Ilay is on a distinguished road

      0  

    Default


    Maybe you show what you want in result?

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    0
    gallyamov is on a distinguished road

      0  

    Default


    Today I has tried to set a headingTpl in a config of header. It works, but looks terrible because of default xtemplate for a renderTpl. Unfortunately, I can't change a renderTpl. I get an exception.

    I posted the example on jsfiddle.net/gallyamov/QSx82. I want to change template for header of grid (where I wrote "Simpsons" in the example). I don't want that it was blue and with default styles.

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,021
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    You can create your own custom header extension by extending Ext.panel.Header (be sure to give it an alias/xtype). In the extension you can create your own renderTpl. Then in your grid config you can pass a custom header config including the xtype of your custom header.

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Posts
    5
    Vote Rating
    0
    gallyamov is on a distinguished road

      0  

    Default


    Thanks for your answer, slemmon. I create custom header with own renderTpl http://jsfiddle.net/gallyamov/EUF8x/1/. But blue container is still visible, and the column for email isn't visible now. What am I doing wrong?

Thread Participants: 2

Tags for this Thread