ExtJs4网格不显示来自响应的数据

Question

我想安排从Sencha使用ExtJs 4.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(); 
    } 
}); 

服务器响应代码：

{"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"}]} 

很抱歉，如果它是太庞大笨拙，但看起来我的反应包含了映射到已声明模型字段的所有必要参数。有人看到了哪里是我的错误？

Answer 1

正如评论中指出的那样，您的root不正确，应该是client_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已经发布了解决方案，我只是想提一下其中的一点，但要发表评论太长了。