Extjs 6 网格 + JSON

Question

我有这个JSON:

{
    "aaa": {
        "list": {
            "count":"1",
            "data": [
                {"id":"1","username":"user1","email":"user1@test.com"}
            ]
        }
     }
}

这是我的店铺：

var store = Ext.create('Ext.data.Store', {
    fields : [ 'id', 
               'username', 
               'email'],
    autoLoad : true,
    proxy: {
        type: 'ajax',
        api: {
            read: 'server/users'
        },
        reader: {
            type: 'json',
            successProperty: 'success',
            root: 'data',
            messageProperty: 'message'
        }
    }
});

这是我的网格：

xtype: 'grid',
title: 'Users',
id: 'users', 
store: store,
columns: {
  items: [
    {text: 'ID', dataIndex: 'id', editor: 'textfield'},
    {text: 'Name', dataIndex: 'name', editor: 'textfield' },
    {text: 'Email', dataIndex: 'email', editor: 'textfield' },
]
},

但是这段代码不起作用。我没有在我的网格上显示 JSON 数据。我认为问题是我没有达到 JSON 个元素。
我怎样才能达到这些要素？（aaa.data.id、aaa.data.name、aaa.data.email 无效）

Answer 1

root 应该是 root: 'aaa.list.data'。 root 应该指向记录数组。 data 根本没有出现在返回的顶级对象中。这就像在说：

var o = {
    aaa: {
        data: [{}]
    }
}
console.log(o.data); // Nothing

Answer 2

由于您不想（或不能）更改您的 JSON 的结构，请将您商店中代理的 reader 更改为与您的 JSON.

reader: {
    type: 'json',
    rootProperty: 'aaa.list.data',
    totalProperty: 'aaa.list.count'
}

Answer 3

您可以使用 reader's transform method 在进行存储处理之前格式化数据。

Extjs 6 网格 + JSON

Extjs 6 grid + JSON

javascript

grid

json

extjs

extjs6