PDA

View Full Version : Tree not loading JSON data



kdm
26 Jun 2013, 1:26 PM
Have a standard border layout with a tree loading in the West panel. When the page loads the ajax retreives the JSON data but the tree is not displayed. I searched the forums and just can't figure out why the tree is not loaded. What am i missing? JSON broken?

Tree Model

Ext.define('msc.model.customer', {
extend: 'Ext.data.Model',
//fields: ['text','id', 'leaf', 'expanded'],
fields: [
{ name: 'text', type: 'string' }
],
proxy: {
type: 'ajax',
url: 'Views/navTree.php',
actionMethods: 'post',
extraParams: {
childLevel: '',
format: 'json'
},
reader: {
type: 'json'
}
}
});

Tree Store

Ext.define('msc.store.customers', {
extend: 'Ext.data.TreeStore',
requires: 'msc.model.customer',
model: 'msc.model.customer',
root: {
name: 'WorkDammit',
expanded: true
}
});

Tree View


Ext.define('msc.view.mainNavTree', {
extend: 'Ext.tree.Panel',
rootVisible: false,
store: 'customers',

initComponent: function() {
// Ajax would not fire; found this work around in the Ext forums. After adding this line the ajax call started to run.
this.store = Ext.data.StoreManager.lookup(this.store);
this.callParent();
}
});


Main App


Ext.application({
name: 'msc',
appFolder: 'Views/js',

models: ['msc.model.customer'],
stores: ['msc.store.customers'],
views: ['msc.view.mainNavTree'],
requires: ['msc.toolbars.mainToolBar',
'Ext.container.Viewport',
'Ext.tab.Panel',
'Ext.layout.container.Border'],

launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items:[{
region: 'north',
...
},
Ext.create('Ext.tab.Panel', {
region: 'east',
...
}),
Ext.create('msc.view.mainNavTree', {
region: 'west',
title: 'Customers',
margin: '0 0 5 5',
layout: 'fit',
border: true,
width: 200,
height: 500,
collapsible: true,
split: true
}),
Ext.create('Ext.container.Container', {
region: 'center',
...
})
]
});
}
});


Json returned from PHP script


{
"text": ".",
"children": [
{
"text": "ABC",
"leaf": false,
"expanded": true,
"children": [
{
"text": "CCC",
"leaf": false,
"expanded": true,
"children": [
{
"text": "gfd",
"leaf": true,
}, {
"text": "sdfgsdfg",
"leaf": true,
}
]
}
]
}
]
}

slemmon
26 Jun 2013, 3:14 PM
Looks like you were in the middle of deleting your last post while I was replying - then I saw you posted again.

*this is using your last post, but see if the example below helps. On the non-leaf nodes returned I removed "expanded": false from the dataset coming from the server.

Tree store / panel


Ext.define('msc.model.customer', {
extend: 'Ext.data.Model',
fields: ['text'],
proxy: {
type: 'ajax',
url: 'data/json.json',
extraParams: {
childLevel: '',
format: 'json'
}/*,
reader: {
type: 'json',
root: 'children'
}*/
}
});


Ext.define('msc.store.customers', {
extend: 'Ext.data.TreeStore',
requires: 'msc.model.customer',
model: 'msc.model.customer',
storeId: 'customers',
autoLoad: true
});


Ext.create('msc.store.customers');


Ext.define('msc.view.mainNavTree', {
extend: 'Ext.tree.Panel',
id: "tree",
autoScroll: true,
animate: false,
enableDD: false,
containerScroll: true,
rootVisible: false,
store: 'customers',
displayField: 'text',


initComponent: function () {
// Ajax would not fire; found this work around in the Ext forums. After adding this line the ajax call started to run.
this.store = Ext.data.StoreManager.lookup(this.store);
this.callParent();
}
});


Ext.create('msc.view.mainNavTree', {
renderTo: Ext.getBody(),
height: 300,
width: 300
});


Server response


[{
"text": "Global",
"id": ":G",
"leaf": "false",
"expanded": "true",
"children": [{
"text": "AAAA",
"id": "96:C",
"leaf": "false"
}, {
"text": "BBBB",
"id": "2:C",
"leaf": "false"
}, {
"text": "CCCC",
"id": "105:C",
"leaf": "false"
}, {
"text": "DDDD",
"id": "36:C",
"leaf": "false"
}, {
"text": "EEEE",
"id": "94:C",
"leaf": "false"
}]
}]

kdm
26 Jun 2013, 9:32 PM
Adding the storeId, displayField and updated JSON seem to do the trick. Thank you very much!!