javascript - ExtJs 4 网格分页

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 代码，用于创建商店、网格等。是:

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/