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,357
    Vote Rating
    200
    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


    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