In this simple grid, I am attempting to display three columns - Subject ID, Subject Name, and Subject Short Name by obtaining JSON data. The data is stored in a variable called myData in JSON format, which has been received from the server. Despite pasting the data into myData, I am unable to see it displayed on the grid.
var myData = {"subjectStoreRoot":[{"subjectName":"Chemistry","subjectId":"Chem01","subjectShortName":"Chemistry"},{"subjectName":"Mathematics","subjectId":"Math01","subjectShortName":"Maths"},{"subjectName":"English","subjectId":"Eng01","subjectShortName":"Eng"},{"subjectName":"Science","subjectId":"Sci01","subjectShortName":"Sci"},{"subjectName":"Social Studies","subjectId":"SS01","subjectShortName":"Social"},{"subjectName":"Kannada","subjectId":"Kan01","subjectShortName":"Kan"}]};
store = new Ext.data.ArrayStore({
data:Ext.decode(myData),
autoDestroy : true,
autoLoad:true,
storeId: 'subjectsGridStoreId',
root: 'subjectStoreRoot',
idProperty: 'subjectId',
fields: [
{name: 'subjectId' ,type:'string'},
{name: 'subjectName' ,type:'string'},
{name: 'subjectShortName' ,type:'string'}
]
});
grid = new Ext.grid.GridPanel({
store: store,
stripeRows:true,
scrollable:true,
columnLines:true,
columns: [
{
id :'subjectId',
header : 'Subject Id',
width : 250,
sortable : true,
dataIndex: 'subjectId'
},{
id :'subjectName',
header : 'Subject Name',
width : 250,
sortable : true,
dataIndex: 'subjectName'
},{
id :'subjectShortName',
header : 'Subject Short Name',
width : 250,
sortable : true,
dataIndex: 'subjectShortName'
}
],
height: 300,
autoScroll:true,
title: 'List of all Subjects',
stateful: true,
stateId: 'grid'
});
I would appreciate any guidance on why the data is not showing up on the grid.