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提琴： 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 ）：

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

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