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

两个图层（root和childs）都需要相同的结构。如果您的root属性名为“Result”，则子属性也称为“Result”。

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

Answer 2

无论如何，您需要更改您的json文件。您可以使用标准阅读器格式：

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

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

要使树读取嵌套数据，必须使用root属性配置Ext.data.reader.Reader，以便读者可以找到每个节点的嵌套数据（如果root是未指定，默认为'children'）。这将告诉树通过相同的关键字查找任何嵌套的树节点，即'children'。如果在配置中指定了根，请确保具有子节点的任何嵌套节点具有相同的名称。请注意，设置defaultRootProperty可以完成同样的事情。

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

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

2 个答案: