There are few things to consider:
- You need an Ext.data.JsonStore instead of an Ext.data.ArrayStore, as the data provided is not a simple array of array(more about Ext.data.ArrayStore explained at here).
- No need to use Ext.decode
I also made a jsFiddle that fix above issues(Code also attached below):
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.JsonStore({
data: myData.subjectStoreRoot,
autoDestroy: true,
autoLoad: true,
storeId: 'subjectsGridStoreId',
// reader configs
root: 'subjectStoreRoot',
//
idProperty: 'subjectId',
fields: [
{
name: 'subjectId',
type: 'string'
},
{
name: 'subjectName',
type: 'string'
},
{
name: 'subjectShortName',
type: 'string'
}]
});
grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
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'
}],
// autoExpandColumn: 'subjectName',
height: 300,
// width: 350,
autoScroll: true,
title: 'List of all Subjects',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});