空行显示在网格中

时间:2012-01-14 22:59:44

标签: javascript extjs grid extjs4 jsonstore

我正在尝试创建一个网格(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
    }
]
}

为什么网格显示空行?

1 个答案:

答案 0 :(得分: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
}
相关问题