ExtJs 4 grid is not populating with data

I am trying to populate Ext JS 4 Grid with json data. Unfortunatelly no matter what i do it's still remains empty. The JS function is below:

function buildGrid() {

Ext.define('Contact', {
    extend: 'Ext.data.Model',
    fields: ['Id', 'Name', 'State', 'Age']
});

var store = Ext.create('Ext.data.Store', {
    model: 'Contact',
    proxy: {
        type: 'ajax',
        url: 'GridData',
        reader: {
            type: 'json',
            record: 'data',
            totalProperty: 'total'
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        { text: "Name", fl开发者_StackOverflow中文版ex: 1, width: 120, dataIndex: 'Name', sortable: true },
        { text: "State", width: 100, dataIndex: 'State', sortable: true },
        { text: "Age", width: 115, dataIndex: 'Age', sortable: true },
    ],
    height: 210,
    width: 600,
    split: true,
    renderTo: Ext.getBody()
}).show();

}

Ext.onReady(buildGrid);

The server responce is look like:

{"callback":"1307878654818","total":1,"data":[{"Id":"ac2bedf1-bb5c-46e0-ba50-a6628341ca25","Name":"Smith","State":"NU","Age":24}]}

so it looks ok. However the grid view is not showing the date.

Anyone can see what i am doing wrong?

You haven't specified the root property. Try

reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'total'
        }