ExtJS 将本地 json 文件加载到树面板中

Question

我想做一棵从 json 本地文件加载信息的树，使用我让树加载节点父节点但不加载子节点的代码，我的代码中缺少一些东西代码？

型号：

Ext.define('modeloCapa', {
    extend: 'Ext.data.Model',
    fields: ['nombre', 'capas', 'capa']
});

商店：

var treeStore = Ext.create('Ext.data.TreeStore', {
    model: 'modeloCapa',
    proxy: {
        type: 'ajax',
        url: "jsontestq.json",  
        reader: {
            type    : 'json',
            root    : 'Result'
        }
    }
});

树面板：

Ext.create('Ext.tree.Panel', {
    title: 'Prueba',
    width: 500,
    height: 550,
    store: treeStore,
    rootVisible: false,
    renderTo: Ext.getBody(),
    columns: [{
        xtype: 'treecolumn', 
        text: 'Col1',
        flex: 2,
        sortable: true,
        dataIndex: 'nombre'
    }]
});

Json 文件:

{"Result":[{
"nombre":"Transporte Marítimo Fluvial ",
"id":74,
 "capas":[{
  "id":268,
  "capa":{
   "id":268,
   "titulo":"puerto_p_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"puerto_p_25k",
   "metadato":"",
   "wfs":false
  }
 }]
},{
"nombre":"Entidades Territoriales y Unidades Admin ",
"id":65,
 "capas":[{
  "id":239,
  "capa":{
   "id":239,
   "titulo":"limite_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"limite_25k",
   "metadato":"",
   "wfs":false
  }
 },{
  "id":319,
  "capa":{
   "id":319,
   "titulo":"administrativo_p_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"administrativo_p_25k",
   "metadato":"",
   "wfs":false
  }
 }]
},{
"nombre":"Instalaciones Construcciones  para el Transporte ",
"id":67,
 "capas":[{
  "id":269,
  "capa":{
  "id":269,
  "titulo":"red_alta_tension_25k",
  "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
  "nombre":"red_alta_tension_25k",
  "metadato":"",
  "wfs":false
  }
 },{
  "id":260,
  "capa":{
   "id":260,
   "titulo":"peaje_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"peaje_25k",
   "metadato":"",
   "wfs":false
  }
 },{
  "id":275,
  "capa":{
   "id":275,
   "titulo":"torre_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"torre_25k",
   "metadato":"",
   "wfs":false
  }
 },{
  "id":266,
  "capa":{
  "id":266,
  "titulo":"puente_l_25k",
  "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
  "nombre":"puente_l_25k",
  "metadato":"",
  "wfs":false
  }
 },{
  "id":267,
  "capa":{
   "id":267,
   "titulo":"puente_p_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"puente_p_25k",
   "metadato":"",
   "wfs":false
  }
 },{
  "id":259,
  "capa":{
   "id":259,
   "titulo":"paso_nivel_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"paso_nivel_25k",
   "metadato":"",
   "wfs":false
  }
 },{ 
  "id":223,
  "capa":{
   "id":223,
   "titulo":"antena_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"antena_25k",
   "metadato":"",
   "wfs":false
  }
 },{ 
  "id":273,
  "capa":{
   "id":273,
   "titulo":"terminal_p_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"terminal_p_25k",
   "metadato":"",
   "wfs":false
  }
 },{ 
  "id":265,
  "capa":{
   "id":265,
   "titulo":"poste_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"poste_25k",
   "metadato":"",
   "wfs":false
  }
 },{
  "id":276,
  "capa":{
   "id":276,
   "titulo":"tuberia_25k",
   "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
   "nombre":"tuberia_25k",
   "metadato":"",
   "wfs":false
  }
 }]}]
}

感谢建议。

Answer 1

您无论如何都需要更改 json 文件。您可以使用标准 reader 格式：

{
root: {
    expanded: true,
    children: [
        { model1_properties },
        { model2_properties, children: [
            {model2_1_properties},
            {model2_2_properties}
        ] },
        { model3_properites }
    ]
}

另一种方法是更改 reader 属性以使其正常工作（但无论如何您都需要修复 json）。请参阅文档 (http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.TreeStore)：

For the tree to read nested data, the Ext.data.reader.Reader must be configured with a root property, so the reader can find nested data for each node (if a root is not specified, it will default to 'children'). This will tell the tree to look for any nested tree nodes by the same keyword, i.e., 'children'. If a root is specified in the config make sure that any nested nodes with children have the same name. Note that setting defaultRootProperty accomplishes the same thing.

您可以将 defaultRootProperty 设置为 'capas'，但您仍然需要在 'capas' 数组中包含模型。

Answer 2

你的树的 json 数据有点乱。

为了更好地理解，我简化了您的 json：

{"Result":[
    {
        "nombre":"Transporte Marítimo Fluvial ",
        "id":74,
        "Result":[
            {
                "id":268,
                "titulo":"puerto_p_25k",
                "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
                "nombre":"puerto_p_25k",
                "metadato":"",
                "wfs":false
            }
        ]
    },
    {
        "nombre":"Entidades Territoriales y Unidades Admin ",
        "id":65,
        "Result":[
            {
                "id":239,
                "titulo":"limite_25k",
                "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
                "nombre":"limite_25k",
                "metadato":"",
                "wfs":false
            },
            {
                "id":319,
                "titulo":"administrativo_p_25k",
                "url":"http:\/\/172.17.2.157:8080\/geoserver\/sigtierras\/wms",
                "nombre":"administrativo_p_25k",
                "metadato":"",
                "wfs":false
            }   
        ]
    }
]}

两层（根层和子层）需要相同的结构。如果你的根属性叫"Result"，子属性也叫"Result"。

这是一个带有工作示例的煎茶 fiddle：https://fiddle.sencha.com/#fiddle/nhd

ExtJS 将本地 json 文件加载到树面板中

ExtJS Load local json file into tree panel

javascript

json

extjs

extjs5