无法通过json数据加载Extjs Grid

Question

显示三列的简单网格...... 试图获取json数据 试图显示3列主题ID，主题名称和主题短名称.. 在myData中保存json格式的数据。 我刚刚粘贴了从服务器收到的数据myData。 我不明白为什么数据没有显示。

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

作为 请指导为什么数据没有显示在网格上？

Answer 1

要考虑的事情很少：

1. 你需要一个 Ext.data.JsonStore 而不是一个 Ext.data.ArrayStore ，因为提供的数据不是简单的数组 数组（更多关于Ext.data.ArrayStore在here处解释）。
2. 无需使用 Ext.decode

我还制作了jsFiddle来解决上述问题（代码也附在下面）：

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.完全使用store或jsonStore而不是arrayStore。 2.然后将配置“data”设置为myData.subjectStoreRoot。