ExtJs 4 Grid Paging

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?

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/