javascript - 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 数据有些困惑。

为了更好地理解，我简化了您的 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
            }   
        ]
    }
]}

两个层(根层和子层)需要相同的结构。如果您的根属性称为“结果”，则子属性也称为“结果”。

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