Results 1 to 4 of 4

Thread: How to update groupHeaderTpl in Ext JS 4.2

  1. #1
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Vote Rating
    11
      0  

    Default How to update groupHeaderTpl in Ext JS 4.2

    Hi

    I want to update the the groupHeaderTpl based on the phone number column value.

    Store: Kindly note that there is no phone number for Infosys Company.
    Code:
    store.add([{
        'name': 'Wipro',
        "phone": "555-111-1224"
    },{
        'name': 'Wipro',
        "phone": "555-111-1224"
    },{
        'name': 'Wipro',
        "phone": "555-111-1224"
    },{
        'name': 'Infosys',
        "phone": ""
    },{
        'name': 'Infosys',
        "phone": ""
    }]);
    Grid:

    Code:
    var strcompanytype = '{[values.rows[0].data.phone]}';
    
    
    var grid = Ext.create('Ext.grid.Panel', {
        title: 'Demo Grid',
        store: store,
        features: [{
                id: 'group',
                ftype: 'grouping',
                groupHeaderTpl: 'Company: {name}' + ' (' + strcompanytype + ')',
                enableGroupingMenu: false
        }],
        columns: [{
            text: 'CompanyName',
            dataIndex: 'name',
        }, {
            text: 'Phone',
            dataIndex: 'phone'
        }],
        height: 400,
        renderTo: Ext.getBody()
    });
    I don't want to add empty bracket if there is no phone number available
    I also tried this with ternary operator check but no luck.

    Fiddle: https://fiddle.sencha.com/#fiddle/fic


    Snapshot :
    HeaderTPL.png

    Any help will be appriciated
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  2. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Vote Rating
    45
      1  

    Default

    How about this?

    Code:
            groupHeaderTpl: ['Company: {name}{[values.rows[0].data.phone ? " (" + values.rows[0].data.phone + ")" : ""]}', {
                formatPhone: function(phone) {
                    return ' (' + phone + ')';
                }
            }],
    Regards,
    Brian


  3. #3
    Sencha User SurenderBhyan1's Avatar
    Join Date
    Nov 2013
    Location
    INDIA
    Posts
    130
    Vote Rating
    11
      0  

    Default

    Thanks a lot Brian, It's working great for me .
    ---A ship in the harbor is safe, but that is not what the ships are made for...

  4. #4
    Sencha User
    Join Date
    Sep 2017
    Posts
    16
    Vote Rating
    0
      0  

    Default

    Same here! Couldn't have done it without your tips!
    __________________________________________
    Alexandra from software outsourcing

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •