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
    4,913
    Vote Rating
    179
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi