如何使用子 json 数据在 Extjs 中创建树面板

Question

我想生成一个树面板，当我定义 TreeStore 时出现以下错误：'无法读取未定义的属性 'isModel'。这是我的代码的一些片段：

Ext.define('App.view.AreaActivosTree', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.AreaActivosTree',
  requires: ['Ext.toolbar.Toolbar', 'Ext.data.*', 'Ext.grid.*', 'Ext.tree.*',    'Ext.tip.*'],

initComponent: function() {

var store = Ext.create('Ext.data.TreeStore', {
fields: ['text'],
proxy:{
  type: 'ajax',
  url: 'principal/app/tree_areas_versat/',
  reader: {
    type: 'json',
    root: 'root',
         }
 },
autoLoad:true,

});

Ext.apply(this, {
items: [{
   xtype: 'treepanel',
   rootVisible: false,
   store: store,
   }],

});

this.callParent(arguments);
},

});

json que devuelve url: {"total": 73, "root": {"expanded": true, "children":      [{"text": "AREA   VICEPRESIDENCIA COMERCIAL", "expanded": true, "children": [{"text": "DIRECCI\u00d3N COMERCIAL LOGISTICA DE ALMACEN", "leaf": true}, {"text": "DIRECCI\u00d3N COMERCIAL MARKETING Y VENTAS", "leaf": true}, {"text": "DIRECCI\u00d3N COMERCIAL NUEVOS NEGOCIOS", "leaf": true}, {"text": "DIRECCI\u00d3N COMERCIAL TRANSPORTE Y SEGURO", "leaf": true}, {"text": "VICEPRESIDENCIA COMERCIAL", "leaf": true}, {"text": "OFICINA SECRETARIA VICE PRESIDENCIA COMERCIAL", "leaf": true}]}, {"text": "AREA DIRECCION DE INSPECCION DEL TRANSPORTE", "expanded": true, "children": [{"text": "DIRECCION DE INSPECCION DEL TRANSPORTE", "leaf": true}, {"text": "GPS", "leaf": true}]}, {"text": "AREA VICEPRESIDENCIA LOGISTICA", "expanded": true, "children": [{"text": "VICEPRESIDENCIA LOGISTICA", "leaf": true}, {"text": "DIRECCI\u00d3N DE GESTI\u00d3N DE LOS RECURSO E INVENTARIOS", "leaf": true}, {"text": "GRUPO ADMINISTRACI\u00d3N", "leaf": true}]}, {"text": "TRANSPORTE", "expanded": true, "children": [{"text": "DIRECCION", "leaf": true}]}, {"text": "DIRECCION JURIDICA AFT", "expanded": true, "children": [{"text": "OFICINA DIRECCION", "leaf": true}, {"text": "OFICINA ASESORES JURIDICOS",   "leaf": true}]}]}, "success": true}

Answer 1

来自商店模型配置的 docs：

This config is required for the store to be able to read data unless you have defined the fields config which will create an anonymous Ext.data.Model.

因此，您可以为您的商店定义一个模型，或者只需将 fields: ['text'] 添加到您的商店配置中即可。

编辑：

我错了，看来问题是您需要定义根所在的 JSON 属性。所以在这种情况下，我认为 'root.children' ，但这会导致我无限加载树。我通过修改您的 JSON 使其工作，以便它仅列出根的子项并且不包括根配置。参见 fiddle here。

如何使用子 json 数据在 Extjs 中创建树面板

How to create tree panel in Extjs with son json data

django

extjs5