Dynamic text for grid column header

[shobhaaradhya]

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,

[sword-it]

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).

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()
});

[shobhaaradhya]

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,

[panshr]

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);

[sword-it]

Hi,

you can use following 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

[Santosh Dhumale]

It worked for me in ext 4.1