PDA

View Full Version : TreePannel - Children not displayed when Root loaded directly from json



burton449
4 Jun 2014, 6:33 AM
Hi,

I would like to load the tree Root directly from my json response instead of creating it manually in the TreeStore. However, doing so the Root's children are not displayed just like if the Root folder were empty.


49219





my json tree response:


{
"Root": {
"leaf": false,
"name": "burton449",
"id": 1,
"loaded": true,
"type": "Root Folder",
"children": [
{
"leaf": false,
"name": "Vector Layers",
"id": 2,
"loaded": true,
"type": "Vector Folder",
"children": [
{
"loaded": true,
"leaf": false,
"type": "Vector Folder",
"id": 3,
"name": "Import"
},
{
"leaf": true,
"type": "LineString",
"id": 5,
"name": "lignes_test"
}
]
}
]
}

my ExtJs Tree config:


Ext.onReady(function(){
Ext.define('Folder', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' }
],
proxy: {
type: 'ajax',
api: {
read: '/some/url/',
},
reader: {
type: 'json',
root: 'Root'
}
}
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Folder',
});

Ext.create('Ext.tree.Panel', {
id: 'tree',
requires: ['Ext.tree.*',
'Ext.data.*',
'Ext.Ajax.request',],
renderTo: 'tree',
width: 300,
height: 850,
header: false,
useArrows: true,
rootVisible: false,
multiSelect: true,
store: store,
});
});

Root is obviously not correctly define in TreePanel as Ext.getCmp('tree').getRootNode().data.id return NaN

Gary Schlosberg
6 Jun 2014, 4:10 PM
Here's a Fiddle which should help you get yours working.
https://fiddle.sencha.com/#fiddle/38e