1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    17
    Vote Rating
    0
    shobhaaradhya is on a distinguished road

      0  

    Default Dynamic text for grid column header

    Dynamic text for grid column header


    Hi,

    For my grid column header I dont want to put static (hardcoded) text instead get from the binding object.


    {
    xtype: 'gridcolumn',
    header: 'Model',
    sortable: false,
    resizable: false,
    dataIndex: 'ModelDesc',
    id: 'description'
    },

    Here header:'Model' is static text instead I want to use dynamic data. Or to use 'ModelDesc' for header?

    Thanks,


  2. #2
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi shobhaaradhya,
    You can change the title of the column simply by setText() of the 'Ext.grid.column.Column' class. You can do that from any event like sgrid's store load etc. Review the following demo to change the text of the grid column on button click(that is in the grid's toolbar).

    Code:
    Ext.create('Ext.data.Store', {
        storeId:'employeeStore',
        fields:['firstname', 'lastname'],
        data:[
            {firstname:"Michael", lastname:"Scott"},
            {firstname:"Dwight", lastname:"Schrute"}
        ]
    });
    
    
    Ext.create('Ext.grid.Panel', {
        title: 'Column Demo',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        tbar: [
            {
                text: 'Change FirstName column Name to - Given Name'
                , handler: function(){
                    var column = Ext.getCmp('firstNameColumn');
                    column.setText('Given Name');
                }
            }
        ],
        columns: [
            {text: 'First Name',  dataIndex:'firstname', id: 'firstNameColumn'},
            {text: 'Last Name',  dataIndex:'lastname'}
        ],
        renderTo: Ext.getBody()
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    17
    Vote Rating
    0
    shobhaaradhya is on a distinguished road

      0  

    Default


    Hi,

    Thanks for the code. Here the text specified is again hardcoded. Can I get these text from store/array which I am populating from database table?

    Thanks,

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    California
    Posts
    14
    Vote Rating
    1
    panshr is on a distinguished road

      0  

    Default


    suppose you are getting data from backend in json response
    now you can define headers as mentioned below:
    headers = jsonData.headerList;
    for(var n = 0;n < headers.length;n++ ){
    fields[n]={name : headers[n]};
    }
    var store = new Ext.data.JsonStore({
    fields:fields
    });
    store.loadData(jsonData.data);

  5. #5
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

    Default


    Hi,

    you can use following code :

    Code:
             {
                        header: ''
                        , dataIndex: 'ModelDesc'
                        , renderer: function (value, metadata, record) {
                            gridscope.getColumnModel().setColumnHeader(1, columnScope.dataIndex);                    
                             return value;
                        }
                    }
    for more detail see this link :http://docs.sencha.com/ext-js/3-4/#!...etColumnHeader
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

  6. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    32
    Vote Rating
    0
    Santosh Dhumale is on a distinguished road

      0  

    Default


    It worked for me in ext 4.1

Thread Participants: 3

Tags for this Thread