グリッドに空の行が表示される

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: 'id', 
    type: 'int' 
}, 
{ 
    name: 'companyId', 
    type: 'int' 
}, 
{ 
    name: 'amount', 
    type: 'int' 
}, 
{ 
    name: 'dealDate', 
    type: 'date' 
}, 
{ 
    name: 'complete', 
    type: 'int' //boolean imitation 
}