I am currently working on a tree panel that displays data from a JSON file. When I expand one category, the elements display correctly. However, when I expand another category, the previously opened elements disappear. This issue persists with all elements in the expand and contract event.
Below are screenshots illustrating this behavior:
First expansion event:
Second expansion event:
Third expansion event:
Here is the code snippet that I am 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 screenWidth = window.screen.width;
var screenHeight = window.screen.height;
var tocWidth = 330;
var tocHeight = 473;
if (screenWidth <= 1024) {
tocWidth = 282;
tocHeight = 373;
}
var treeStore = Ext.getStore('capa');
// Additional code for initializing the tree view
... // Rest of the original code goes here
}
And the sample JSON data used in the application:
{"Result": [{
"nombre": "Componente Biótico y Abiótico",
"id": 1,
"Result":[{
"nombre": "Recursos hídricos",
"id": 2,
"Result": [/* Nested elements go here */]
},{
"nombre": "Fauna",
"id": 3,
"Result": [/* Nested elements go here */]
},{
"nombre": "Ecosistemas",
"id": 4,
"Result": [/* Nested elements go here */]
}]},{
"nombre": "ARE",
"id": 5,
"Result":[{
"nombre": "Minero Energético",
"id": 2,
"Result": [/* Nested elements go here */]
}]},{
/* More nested data categories */
}]}