[英]ExtJS Tree panel not show elements correctly
I'm creating a tree panel with data from a JSON file, when I expand a categorie shows elements correctly but if i expand another categorie the elements opened desappier, this happens with all elements in the expand and contract event. 我正在使用来自JSON文件的数据创建树面板,当我正确地扩展类别显示元素时,但是如果我展开另一类别,则打开的元素变得更加不合理,则在expand和contract事件中的所有元素都会发生这种情况。
Here are a pictures of the behaviour 这是行为的图片
Fist expand event: 拳头展开事件:
Second expand event: 第二次展开事件:
Third expand event: 第三次展开事件:
Here is the code that 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
for (i = 0; i < 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 that i'm using: 还有我正在使用的JSON文件:
{"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 only if all your nodes have a unique 'id' property. 仅当所有节点都具有唯一的“ id”属性时,TreePanel才能正常工作。
In your JSON file, we can see that "Recursos hídricos" node, "Minero Energético" and "Cobertura y uso" have the same id : 在您的JSON文件中,我们可以看到“ Recursoshídricos”节点,“ MineroEnergético”和“ Cobertura y uso”具有相同的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 you click on your "ARE" node. 这就是为什么当您单击“ ARE”节点时“ Recursoshídricos”消失的原因。 Make sure to set a unique ID to all your nodes (no matter the level they are) and your problem will be solved.
确保为所有节点设置唯一的ID(无论它们的级别如何),问题将得到解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.