ExtJS 4 - Data in the grid not visible

Question

enter image description here

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.

I have been able to find a reason behind this. When I am giving this grid as an item of a container in form at that time the data is not getting displayed, but if I give this grid as an item of a fieldset in a form then the data is being displayed. Though the issue is resolved now, but could anyone share the cause behind such a behavior? — netemp
Hello Netemp, I am facing problem with loading data into grid, when I hardcode data in the Store data is displayed, but when I use the code for communicating with server data is not displayed can you help me ? — Ram
I have Service like this localhost:8080/Petcrumbs/member/getMemberList Request Parameters : {"pageNumber":5} Response Success : { "listOfMembers": [ { "name": "Test Mmber4", "password": "287974", "gender": "Male", "joinedDate": "09-17-2013" } ], "message": "Member retrieved successfully.", "success": true } — Ram
In Extjs4 I have used In EXTJS Store Ext.define('PetCrumbs.store.Members', { extend : 'Ext.data.ArrayStore', model : 'PetCrumbs.model.Member', autoLoad : true, //storeId : 'Data', proxy : { type : 'ajax', url : '/Petcrumbs/member/getMemberList', method : 'POST', headers : { 'Content-Type' : 'application/json', 'Accept' : 'application/json' }, jsonData : { pageNumber : "5" }, reader : { type : 'json', root: 'listOfMembers', successProperty: 'success' } } }); Please help me what is wrong with the above code ? — Ram
@Ram: I shall suggest you to post your problem as a new question as the issue you are facing is different. Also, add some code to the question so that you can be helped. — netemp

netemp netemp · Accepted Answer · 2012-10-03T08:38:15

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.

ExtJS 4 - Data in the grid not visible

2 Answers