ExtJS4 - Iterate through Store in Grid

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.

• Vahid: Thank you sha. Because I don't create any columns before callParent function, after I call it, again the "headerCtCfg is undefined" error occurs. Any solutions for this?
• Vahid: Thank you again sha. The problem is "store.on('load'..." executed after all of initComponent codes. I don't know it's complicated or something going wrong here...
• sha: Well... load() is async. So you might consider creating grid first with dummy column, then load store and replace it with new data.
• Vahid: Still no chance. This is a real problem for many people in Ext JS Forum. Anyaway, Thank you. If some day my reputation will raise up to 15, I promise to come back here and rate up your answer. Thank you sha.
• Vahid: sha, I have use your method and create dummy column like this: this.columns = [] and then reconfigure grid in store.load method. Please edit your post, so I can mark it as Correct Answer. Thank you.