无法通过 json 数据加载 Extjs Grid

Posted 2023-02-26

【中文标题】无法通过 json 数据加载 Extjs Grid

【英文标题】：Not able to load Extjs Grid by json data

【发布时间】：2014-04-27 11:48:59

【问题描述】：

显示三列的简单网格... 试图获取 json 数据 尝试显示 3 列 Subject Id 、 Subject Name 和 Subject Short Name .. 在 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'
                                                );

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

【问题讨论】：

建议您修复您的帖子。

我很抱歉.. 现在它已修复.. 请现在建议为什么数据没有加载

【参考方案1】：

有几件事情需要考虑：

您需要一个 Ext.data.JsonStore 而不是 Ext.data.ArrayStore，因为提供的数据不是一个简单的数组 数组（有关 Ext.data.ArrayStore 的更多信息，请参阅 here）。 无需使用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'
);

【参考方案2】：

1. 只需使用 store 或 jsonStore 代替 arrayStore。 2.然后将配置“数据”设置为myData.subjectStoreRoot。