Question

I want to iterate through store and make grid columns dynamically. When I use columns.push method in the onLoad event of Store, I got this error: “headerCtCfg is undefined”. This is my code:

Ext.define('App.view.UserList' ,{
     extend: 'Ext.grid.Panel',
     alias : 'widget.userlist',

     store: 'Users',

     initComponent: function() {
        var store = Ext.getStore( this.store );
        store.on('load', function () {
            var columns = this.columns = [];
            columns.push( {header: 'H', dataIndex: '0'} );

Thank you in Advance

Answer 1

Try to add this.callParent(arguments) before doing anything else in your initComponent function. This way view gets completely created and you will be able to access columns.

Also I suggest to look at reconfigure method of tableview to change store and columns on the fly.

Update: Try to use Ext.apply instead of columns.push:

Ext.apply(this, {
    columns: [ list of your columns ]
});

Update2: load() is async. So you might consider creating grid first with dummy column, then load store and replace it with new data.