CODEWITHSUNDEEP
javascriptjsonextjsextjs5
davids182009
davids182009

Reputation: 451

ExtJS Load local json file into tree panel

I want to do a tree that load information from a json local file, with the code that i have the tree load the node parent but the child node doesn't load, is something missing in my code?

Model:

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

Store:

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

Tree panel:

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 file:

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

Thanks for suggest.

Upvotes: 2

Views: 2350

Answers (2)

Tyr
Tyr

Reputation: 2810

You have a bit messed up json data for your tree.

I've simplified your json for better understanding:

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

Both layers (root and childs) need the same structure. If your root property is called "Result", the child property is also called "Result".

Here is a sencha fiddle with a working example: https://fiddle.sencha.com/#fiddle/nhd

Upvotes: 4

Nikolai Lopin
Nikolai Lopin

Reputation: 692

You need to change your json file anyway. You can use standard reader format: 

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

Another way is to change reader properties to make it work (but anyway you'll need to fix your json). See the documentation (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.

You can set defaultRootProperty to 'capas', but you still need to have Models inside 'capas' array.

Upvotes: 2

Related Questions