ExtJs 4 Grid Paging

Question

我想用分页使用ExtJs框架使数据网格，但不幸的是我的代码不起作用。也许你们中的一些人已经解决了这个问题。

从服务器

JSON-回复是：

{ 
    "totalCount":"2", 
    "companies":[ 
     { 
      "id":"1", 
      "name":"Name1", 
      "region":"Reg1", 
      "address":"Addr1", 
      "dealCount":"3", 
      "dealAmount":"19250", 
      "latestDealDate":"2012-01-09" 
     }, 
     { 
      "id":"2", 
      "name":"Name2", 
      "region":"Reg2", 
      "address":"Addr2", 
      "dealCount":"2", 
      "dealAmount":"12150", 
      "latestDealDate":"2012-01-08" 
     } 
    ] 
} 

JavaScript代码，创建店铺，网格，e.t.c.是：

Ext.require([ 
    'Ext.grid.*', 
    'Ext.data.*', 
    'Ext.util.*', 
    'Ext.toolbar.Paging', 
    'Ext.ModelManager', 
    'Ext.layout.*' 
]); 

Ext.onReady(function(){ 

    // Define data model 
    Ext.define('Company', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { 
       name: 'id', 
       type: 'int' 
      }, 
      'name', 'region', 'address', 
      { 
       name: 'dealCount', 
       type: 'int' 
      }, 
      { 
       name: 'dealAmount', 
       type: 'int' 
      }, 
      { 
       name: 'latestDealDate', 
       type: 'string' 
      } 
     ], 
     idProperty: 'id' 
    }); 

    // Create data store 
    var companies = Ext.create('Ext.data.Store', { 
     pageSize: 50, 
     model: 'Company', 
     proxy: Ext.create('Ext.data.proxy.Ajax', { 
      url: 'service/companies-data.php' 
     }), 
     reader: Ext.create('Ext.data.reader.Json', { 
      root: 'companies', 
      totalProperty: 'totalCount' 
     }), 
     sorters: [{ 
      property: 'name', 
      direction: 'ASC' 
     }] 
    }); 

    // Create data grid 
    var grid = Ext.create('Ext.grid.Panel', { 
     renderTo: Ext.getBody(), 
     width: 700, 
     height: 500, 
     store: companies, 
     columns: [ 
      { 
       text: 'Name', 
       dataIndex: 'name' 
      }, 
      { 
       text: 'Region', 
       dataIndex: 'region' 
      }, 
      { 
       text: 'Address', 
       dataIndex: 'address' 
      }, 
      { 
       text: 'Deal Count', 
       dataIndex: 'dealCount' 
      }, 
      { 
       text: 'Deal Amount', 
       dataIndex: 'dealAmount' 
      }, 
      { 
       text: 'Latest Deal Date', 
       dataIndex: 'latestDealDate' 
      } 
     ], 
     bbar: Ext.create('Ext.PagingToolbar', { 
      store: companies, 
      displayInfo: true, 
      displayMsg: 'Displaying topics {0} - {1} of {2}', 
      emptyMsg: "No topics to display" 
     }) 
    }); 

    // Load first data page 
    companies.loadPage(1); 

}); 

Firebug显示，该服务器响应json数据，但网格保持空。我该如何解决它？

Answer 1

你应该在proxy里定义reader（至少对我有帮助）。例如：

proxy: Ext.create('Ext.data.proxy.Ajax', { 
    url: 'service/companies-data.php', 
    reader: Ext.create('Ext.data.reader.Json', { 
     root: 'companies', 
     totalProperty: 'totalCount' 
    }) 
}) 

工作样本：http://jsfiddle.net/ycDzL/3/