var storeConfig = new Ext.data.JsonStore({
root: 'details',
fields: ['a1','a2','a3','a4','a5','a6','a7'],
pruneModifiedRecords:true,
autoload: false
});
var gridDetailConfig = new Ext.grid.Panel({
title: 'Details',
store: storeConfig,
width : '100%',
header: {
titleAlign: 'center'
},
columns: [
{ text: 'col1', dataIndex: 'a1' },
{ text: 'col2', dataIndex: 'a2'},
{ text: 'col3', dataIndex: 'a3' },
{ text: 'col4', dataIndex: 'a4' },
{ text: 'col5', dataIndex: 'a5' },
{ text: 'col6', dataIndex: 'a6' },
{ text: 'col7', dataIndex: 'a7' },
],
});
This is the setup for my data store and grid. Data is loaded through an ajax request;
var fetchData = function (param1, param2, param3){
gridDetailConfig.mask('Loading');
Ext.Ajax.request({
url : '../project/getInfo.ajax',
params :{
s1: param1,
s2: param2,
s3: param3
},
callback: function(options, success, response){
if(success){
var responseData = Ext.decode(response.responseText);
gridDetailConfig.unmask();
//some other codes not related grid
storeConfig.loadData(responseData,false);
} else {
gridDetailConfig.unmask();
Alert(responseData.msj);
}
}
});
The JSON returned is as follows ;
{"success":true,"first":[{...},],"details":[{"a1":"d1","a2":"d2",..."a7":"d7"}]}
Despite everything appearing to be in order, nothing is displayed on the grid, without any errors being returned. The loading mask shows and then disappears, but no data is visible on the grid.
I'm struggling to identify the issue. Can anyone provide assistance?