Empty rows appear in grid

Question

I'm trying to create a grid (Ext.grid.Panel) and fill it with data. But something is going wrong so the grid shows empty rows without data.

Model is:

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'
});

Grid & Store code is:

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-response from server is:

{
"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
    }
]
}

Why does the grid display empty rows?

Answer 1

All your model's fields but the first are being declared with 'id' properties where they should instead be using 'name':

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