javascript - 空行出现在网格中

Question

我正在尝试创建一个网格 ( Ext.grid.Panel) 并用数据填充它。但是出了点问题，所以网格显示没有数据的空行。

型号为：

Ext.define('Order', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'id',
            type: 'int'
        },
        {
            id: 'companyId',
            type: 'int'
        },
        {
            id: 'amount',
            type: 'int'
        },
        {
            id: 'dealDate',
            type: 'date'
        },
        {
            id: 'complete',
            type: 'int' //boolean imitation
        }
    ],
    idProperty: 'id'
});

网格和存储代码是：

var orders = Ext.create('Ext.data.Store', {
    model: 'Order',
    proxy: Ext.create('Ext.data.proxy.Ajax', {
        url: 'service/orders-data.php?',
        reader: Ext.create('Ext.data.reader.Json', {
            root: 'orders'
        })
    }),
    sorters: [{
        property: 'name',
        direction: 'ASC'
    }]
});
orders.load();

var ordersGrid = Ext.create('Ext.grid.Panel', {
    width: 400,
    height: 300,
    store: orders,
    columns: [
        {
            text: 'Amount',
            dataIndex: 'amount',
            width: 120
        },
        {
            text: 'Deal date',
            dataIndex: 'dealDate',
            width: 120
        },
        {
            text: 'Complete',
            dataIndex: 'complete',
            width: 120
        }
    ]
});

来自服务器的 JSON 响应是：

{
"orders":[
    {
        "id":1,
        "amount":5000,
        "dealDate":"2012-01-05",
        "complete":0
    },
    {
        "id":2,
        "amount":6850,
        "dealDate":"2012-01-07",
        "complete":0
    },
    {
        "id":5,
        "amount":7400,
        "dealDate":"2012-01-09",
        "complete":0
    }
]
}

为什么网格显示空行？

Answer 1

您模型的所有字段，但第一个字段都使用“id”属性声明，而应该使用“name”：

{
    name: 'id',
    type: 'int'
},
{
    name: 'companyId',
    type: 'int'
},
{
    name: 'amount',
    type: 'int'
},
{
    name: 'dealDate',
    type: 'date'
},
{
    name: 'complete',
    type: 'int' //boolean imitation
}