javascript - ExtJS Tree panel not show elements correctly -
i'm creating tree panel data json file, when expand categorie shows elements correctly if expand categorie elements opened desappier, happens elements in expand , contract event.
here pictures of behaviour
fist expand event:
second expand event:
third expand event:
here code i'm using:
the model:
ext.define('app.model.modelocapa', { extend: 'ext.data.model', fields: ['nombre','url'], proxy: { type: 'ajax', url: "data/jsonprovisional.json", reader: { type : 'json', root : 'result', } }}); the store:
ext.define('app.store.capa', { extend: 'ext.data.treestore', requires: 'app.model.modelocapa', model: 'app.model.modelocapa'}); the view:
initcomponent: function() { var anchopanatallares = window.screen.width; var altopantallares = window.screen.height; var anchotoc = 330; var altotoc = 473; if (anchopanatallares <= 1024) { anchotoc = 282; altotoc = 373; } var treestore = ext.getstore('capa'); function addurl(value, p, record) { return value ? ext.string.format( '<a href="'+value+'"target="_blank"'+'>ver metadato'+'</a>' ):''; } var tree = ext.create('ext.tree.panel', { title: '', reservescrollbar: true, loadmask: true, usearrows: true, rootvisible: false, store: 'capa', allowdeselect : true, border : true, animate: true, listeners: { checkchange: function(node, checked, eopts) { console.log('nodo seleccionado:', node, checked, eopts); }, select: function( record, index, eopts ){ console.log('elemento seleccionado:', record, index, eopts); }, beforedeselect: function( record, index, eopts ){ console.log("elemento deseleccionado :", record); } }, columns: [{ xtype: 'treecolumn', text: 'capa', flex: 5, sortable: true, dataindex: 'nombre' },{ text: 'metadato', flex: 2, dataindex: 'url', renderer: addurl }], tbar: [{ labelwidth: 100, xtype: 'triggerfield', fieldlabel: 'nombre capa:', triggercls: 'x-form-clear-trigger', ontriggerclick: function() { this.reset(); treestore.clearfilter(); this.focus(); }, enablekeyevents: true, listeners: { keyup: function() { var field = tree.down('textfield'), v; try { v = new regexp(field.getvalue(), 'i'); treestore.filter({ filterfn: function(node) { var children = node.childnodes, len = children && children.length, //visibilidad de los hijos visible = node.isleaf() ? v.test(node.get('nombre')) : false, i; //visibilidad de los padres (i = 0; < len && !(visible = children[i].get('visible')); i++); return visible; }, id: 'campofiltrocapa' }); } catch (e) { field.markinvalid('expresión no valida'); } }, buffer: 250 } }, { xtype : 'button', text: 'click', id : 'btnapagarcapas', action: 'apagarcapas', tooltip : 'apagar todas las capas', padding:0, listeners : { click : function(boton) { console.log("boton presionado!!"); } } }] }); ext.apply(this, { title: 'tabla contenido', id: 'ventanacapas', constrain: true, header : { titleposition : 2, titlealign : 'center' }, closable : false, width : anchotoc, height : altotoc, x : 20, y : 270, layout : 'fit', animcollapse : true, collapsible : true, collapsedirection : ext.component.direction_left, listeners : { collapse : function(p) { } }, items: [tree], }); this.callparent(arguments); } and teh json file i'm using:
{"result": [{ "nombre": "componente biótico y abiótico", "id": 1, "result":[{ "nombre": "recursos hídricos", "id": 2, "result": [{ "id": 268, "titulo": "hidrogeologia_atlas", "url": "http://srsigaremap:8080/geoserver/web/?wicket:bookmarkablepage=:org.geoserver.web.demo.mappreviewpage", "nombre": "hidrogeologia_atlas", "metadato": "", "wfs": false, "leaf": true, "checked": false }] },{ "nombre": "fauna", "id": 3, "result": [{ "id": 269, "titulo": "aves_atlas_atlas", "url": "http://srsigaremap:8080/geoserver/web/?wicket:bookmarkablepage=:org.geoserver.web.demo.mappreviewpage", "nombre": "aves_atlas_atlas", "metadato": "", "wfs": false, "leaf": true, "checked": false }] },{ "nombre": "ecosistemas", "id": 4, "result": [{ "id": 270, "titulo": "ecosistemas_marinos_atlas", "url": "http://srsigaremap:8080/geoserver/web/?wicket:bookmarkablepage=:org.geoserver.web.demo.mappreviewpage", "nombre": "ecosistemas_marinos_atlas", "metadato": "", "wfs": false, "leaf": true, "checked": false }] }]},{ "nombre": "are", "id": 5, "result":[{ "nombre": "minero energético", "id": 2, "result": [{ "id": 271, "titulo": "gasoducto_atlas", "url": "http://srsigaremap:8080/geoserver/web/?wicket:bookmarkablepage=:org.geoserver.web.demo.mappreviewpage", "nombre": "gasoducto_atlas", "metadato": "", "wfs": false, "leaf": true, "checked": false },{ "id": 272, "titulo": "titulos_mineros_atlas", "url": "http://srsigaremap:8080/geoserver/web/?wicket:bookmarkablepage=:org.geoserver.web.demo.mappreviewpage", "nombre": "titulos_mineros_atlas", "metadato": "", "wfs": false, "leaf": true, "checked": false }] }]},{ "nombre":"agrología", "id":13, "result":[{ "nombre": "cobertura y uso", "id": 2, "result": [{ "id": 271, "titulo": "cobertura_vegetal_guajira_atlas", "url": "http://srsigaremap:8080/geoserver/web/?wicket:bookmarkablepage=:org.geoserver.web.demo.mappreviewpage", "nombre": "cobertura_vegetal_guajira_atlas", "metadato": "", "wfs": false, "leaf": true, "checked": false }] }]}]}
treepanel works fine if nodes have unique 'id' property.
in json file, can see "recursos hídricos" node, "minero energético" , "cobertura y uso" have same id :
"nombre": "recursos hídricos", "id": 2 "nombre": "minero energético", "id": 2 "nombre": "cobertura y uso", "id": 2 that's why "recursos hídricos" disapear when click on "are" node. make sure set unique id nodes (no matter level are) , problem solved.
Comments
Post a Comment