ExtJs 4网格分页

Question

I'm trying to make data grid with paging using ExtJs framework, but unfortunately my code doesn't work. Maybe some of you has already settled this such problem.

Json-reply from server is:

{
    "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 code, which creates store, grid, e.t.c. is:

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 shows, that server responds with json-data, but grid remains empty. How can I fix it?

Answer 1

You should define reader inside proxy (at least that helped for me). Eg:

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

Working sample: http://jsfiddle.net/ycDzL/3/