ExtJS 4 - data in the grid is not visible

Question

I have a simple grid with the following code (along with the store code and model).

var containerDetailsGrid = Ext.create('Ext.grid.Panel', { store: storeVarContainerDetails, tbar:[ { xtype:'tbtext', text:'Container Details' } ], columns: [ { header : 'Ctr Size', flex : 1, dataIndex: 'ctrSize', autoExpand:true, align:'center' } ], height: 100 }); var storeVarContainerDetails = Ext.create('Ext.data.Store', { model: 'VoyageMonitoringContainerDetailsModel', proxy: { type: 'ajax', url: 'http://localhost/pnc/stores.php', extraParams:{ action:'containerDetails' }, reader: { type: 'json' } }, autoLoad:true }); Ext.regModel('VoyageMonitoringContainerDetailsModel', { extend: 'Ext.data.Model', fields: [ {type: 'string', name: 'ctrSize'} ] }); 

The store loads and retrieves data, but this data simply does not appear or is actually visible in the grid.

When I check the grid element in the DOM, I can see that the data is in the “td” of the grid table, but this data just does not appear.

There are other grids on the page as well, but they all display data other than this. In addition, there is no error in the console either.

Can anyone shed light on this, why can this happen? Attached screen for clarity.

PS: I am using ExtJS 4.

Answer 1

By posting the solution as an answer here so that it can help someone look for the same, and I can mark this question as an answer. Solution - the grid should not be made a child of the container in the form, but should be a child of the set in the form. I do not know the reasons for this, but it works well for me. Hope this helps someone else too.

Answer 2

Have you tried this in your store?

  autoLoad :true