Javascript ExtJs4网格不'；t显示来自响应的数据

我正在尝试使用Sencha的ExtJS4.2来安排基于ajax的网格。我定义了数据模型和自定义网格组件，但不幸的是，它无法显示可接受的数据。我不知道为什么：(

型号代码：

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'}
    ]
});

我的网格组件代码：

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();
    }
});

---

很抱歉，如果它太大和笨拙，但我觉得响应包含了所有必要的参数来映射到声明的模型字段。有人知道我的错误在哪里吗？

如注释中所述，您的

根

是不正确的，应该是

客户端\u ops

。作为补充说明，您不需要直接创建对象的实例，您可以像这样声明您的商店：

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 = [];
    }
});

---

建议@Akatum将其作为答案发布，请不要接受，因为@Akatum已经发布了解决方案，我只想提及旁点，但它太长了，无法发表评论。

在您的根配置中，您有“$client\u ops”，应该是“client\u ops”，没关系，您的答案很复杂，我没有任何补充：）

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 = [];
    }
});