ExtJs4 grid doesn't display data from response

Question

I'm trying to arrange ajax-based grid using ExtJs 4.2 from Sencha. I defined data model and my custom grid component, but unfortunately it fails to show accepted data. I can't find out why :(

Model code:

Ext.define('OperatedClient', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id'},
        {name: 'first_name'},
        {name: 'second_name'},
        {name: 'surname'},
        {name: 'birthdate'},
        {name: 'diagnose'},
        {name: 'operation_date'},
        {name: 'operation'},
        {name: 'price'}
    ]
});

My grid component code:

var defaultColumnRenderer = function(v) {
    return '<div style="text-align:right">' + v + '</div>';
};

Ext.define('Ext.custom.OperatedClientsGrid', {
    extend: 'Ext.grid.Panel',
    cls: 'custom-grid',
    columnLines: true,
    initComponent: function() {
        var opStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            model: 'OperatedClient',
            proxy: Ext.create('Ext.data.proxy.Ajax', {
                url: 'service/clients_op/read.php',
                reader: Ext.create('Ext.data.reader.Json', {
                    root: '$client_ops'
                })
            })
        });
        Ext.apply(this, {
            store: opStore
        },
        columns: [{
               text: 'Id',
               dataIndex: 'id',
               align: 'center',
               renderer: defaultColumnRenderer
           },{
                text: 'Имя',
                dataIndex: 'first_name',
                align: 'center',
                renderer: defaultColumnRenderer
           },{
                text: 'Отчество',
                dataIndex: 'second_name',
                align: 'center',
                renderer: defaultColumnRenderer
           },{
                text: 'Фамилия',
                dataIndex: 'surname',
                align: 'center',
                renderer: defaultColumnRenderer
           },{
               text: 'Дата рождения',
               dataIndex: 'birthdate',
               align: 'center',
               renderer: defaultColumnRenderer
           },{
               text: 'Диагноз',
               dataIndex: 'diagnose',
               align: 'center',
               renderer: defaultColumnRenderer
           },{
               text: 'Операция',
               dataIndex: 'operation',
               align: 'center',
               renderer: defaultColumnRenderer
           },{
               text: 'Дата операции',
               dataIndex: 'operation_date',
               align: 'center',
               renderer: defaultColumnRenderer
           },{
               text: 'Стоимость',
               dataIndex: 'price',
               align: 'center',
               renderer: defaultColumnRenderer
            }]
        });
        this.callParent();
    }
});

Server response code:

{"client_ops":[{"id":"1","first_name":"\u0410\u043d\u0434\u0440\u0435\u0439","second_name":"\u0418\u0432\u0430\u043d\u043e\u0432\u0438\u0447","surname":"\u0411\u043e\u043b\u044f\u0447\u043a\u0438\u043d","diagnose":"\u041f\u0438\u0437\u0434\u0430\u0440\u0438\u043a\u0438","operation_date":"2014-01-21","operation":"\u041e\u0431\u0440\u0435\u0437\u0430\u043d\u0438\u0435","price":"3000"},{"id":"2","first_name":"\u0410\u0440\u043a\u0430\u0434\u0438\u0439","second_name":"\u0418\u043c\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u043e\u0432\u0438\u0447","surname":"\u0416\u0438\u043b\u0438\u0441\u0442\u044b\u0439","diagnose":"\u041f\u043e\u0435\u0431\u0443\u0448\u0435\u0447\u043a\u0438","operation_date":"2014-01-25","operation":"\u041e\u0431\u0435\u0437\u0433\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u043d\u0438\u0435","price":"1500"},{"id":"3","first_name":"\u0411\u043e\u0440\u0438\u0441","second_name":"\u0412\u0438\u0442\u0430\u043b\u044c\u0435\u0432\u0438\u0447","surname":"\u0422\u0440\u0430\u043a\u0442\u043e\u0440","diagnose":"\u041a\u043e\u0441\u043e\u0451\u0431\u0438\u0435","operation_date":"2014-11-23","operation":"\u041f\u0440\u043e\u0442\u0435\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","price":"4700"},{"id":"4","first_name":"\u0421\u0435\u0440\u0433\u0435\u0439","second_name":"\u0421\u0435\u0440\u0433\u0435\u0435\u0432\u0438\u0447","surname":"\u041a\u0430\u0440\u0442\u043e\u0448\u0438\u043d","diagnose":"\u0424\u0413\u041c","operation_date":"2014-01-20","operation":"\u0412\u0441\u043a\u0440\u044b\u0442\u0438\u0435","price":"8700"}]}

Sorry if it is too huge and clumsy, but it seems me that response contains all neccessary params to map to declared model fields. Does anybody see where is my mistake?

Answer 1

As noted in the comment, your root is incorrect and should be client_ops. As a side note, you don't need to create instances of objects directly, you can declare your store like:

Ext.define('Ext.custom.OperatedClientsGrid', {
    extend: 'Ext.grid.Panel',
    cls: 'custom-grid',
    columnLines: true,
    initComponent: function() {
        this.store = {
            model: 'OperatedClient',
            proxy: {
                type: 'ajax',
                reader: {
                    root: 'client_ops'
                }
            }
        };
        this.columns = [];
    }
});

Would suggest @Akatum to post as an answer, please don't accept this since @Akatum already posted the solution, I just wanted to mention the side point but it's too long to put in a comment.