Not able to load Extjs Grid by json data

Question

Simple grid showing three columns ... trying to get a json data Trying to display 3 columns Subject Id , Subject Name and Subject Short Name .. in myData a json format data is saved. i have just pasted the data received from server for myData. I dont understand why data is not displaying.

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',

    // reader configs

    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'
                                                        }
                                                    ],
                                                 //   autoExpandColumn: 'subjectName',
                                                    height: 300,
                                                //  width: 350,
                                                    autoScroll:true,
                                                    title: 'List of all Subjects',
                                                    // config options for stateful behavior
                                                    stateful: true,
                                                    stateId: 'grid'
                                                });

As Please guide why the data is not displaying on the grid?

Answer 1

There are few things to consider:

1. 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).
2. 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'
});

Answer 2

1.Simply use either store or jsonStore instead of arrayStore. 2.Then set the config "data" as myData.subjectStoreRoot.