Question

I have a simple grid with the following code (along with the code of store 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 is getting loaded and fetching the data but this data is just not getting displayed or actually is being visible in the grid.

When I inspect the grid element in DOM, then I can see the data to be there in ‘td’ of grid table, but that data is just not getting displayed.

There are other grids too on the page but all are displaying the data except this one. Also, there is no error being throw in console too.

Could anyone please throw some light at this that why it could be happening? Attached is a screen shot for more clarity.

PS: I am using ExtJS 4.

Answer 1

Posting the solution as an answer here so that it can help someone looking for the same and also I can mark this question as answered. The solution is – a grid should not be made the child of a container in a form, rather should be the child of fieldset in the form. I don’t know the reason behind this, but works well for me. Hope this helps someone else too.