Extjs将本地JSON对象加载到网格中

Question

我刚接触Ext，并尝试在Grid上使用各种选项。我已经创建了一个网格并将其添加到面板(Ext.panel.Panel)。网格显示为空数据(我还没有给它添加代理)。在某个事件发生时，我构造一个JSON对象并在网格上触发loadData。

以下是我的代码片段。

Ext.define('AM.view.grid.Details', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.details',
    title: 'Widget Data',

    store: {
        autolaod: true,
        fields: [{
            name: 'widgetid',
            mapping: 'widget_id',
            type: 'string'
        }, {
            name: 'widgetname',
            mapping: 'widget_name',
            type: 'string'
        }, {
            name: 'widgetnotes',
            mapping: 'widget_notes',
            type: 'String'
        }],
        reader: {
            type: 'json'
        }
    },
    width: 620,
    height: 400,

    forceFit: true,
    columns: [{
        header: 'id',
        dataIndex: 'widgetid',
        hidden: true
    }, {
        header: 'Name',
        dataIndex: 'widgetname',
        width: 150
    }, {
        header: 'Note',
        dataIndex: 'widgetnotes',
        width: 150
    }],

    renderTo: Ext.getBody()
});

我有一个函数，它是另一个小部件的回调函数。当事件发生时，此函数为getTriggered。

function someFunction(grid) {
    var jsonData = formGridData();
    grid.store.loadData(jsonData);
}

请假设网格已创建，并且我有函数formGridData()，它将格式字符串转换为JSON对象并返回。

因此，当我运行应用程序时，如果jsonData的长度为5，那么网格中就会出现5个空行。

以下是JSONData

[{
    'widget_id':    'widget-1',
    'widget_name':  'gridpanel',
    'widget_notes': 'This is used to handle..'
}, {
    'widget_id':    'widget-2',
    'widget_name':  'combo',
    'widget_note':  'This is used to handle..'
}, {
    'widget_id':    'widget-3',
    'widget_name':  'panel',
    'widget_note':  'This is used to handle..'
}]

我做的事有什么问题吗？

谢谢,

Phani

Answer 1

网格上的dataIndexes是错误的。

columns: [{
    header: 'id',
    dataIndex: 'widget_id', //was widgetid
    hidden: true
}, {
    header: 'Name',
    dataIndex: 'widget_name', //was widgetname
    width: 150
}, {
    header: 'Note',
    dataIndex: 'widget_notes',  //was widgetnotes
    width: 150
}]

实际情况是，它看到了适当数量的行，但由于您以json为例，将其命名为widget_*和note widget*，因此它认为它们是其他东西，因此不能在网格中适当地显示它们。

Answer 2

抱歉，我没注意到

所以你的dataIndex似乎是无效的

http://jsfiddle.net/ssxenon01/WpZMU/8/