treepanel - load array

[Comister]

Hi folks,

I currently try to load a tree and i am not sure if i am taking the right approach.
The idea is to load the root elements and/or the elements below root through an ajax proxy into a TreeStore.
I think i already have the load itself working but i am facing issues with mapping my data to a column, because i do not use a associative array, data looks simply like that:


["Value A", "Value B", "Value C"]

The following Code is used to setup the Store, Model and Tree:

The tree:

Ext.define('MyApp.view.wndTest', {
extend: 'Ext.window.Window', height: 539,
id: 'winTest',
width: 349,
title: 'Test',
modal: true,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'treepanel',
height: 467,
id: 'treeTest',
title: 'Test',
hideHeaders: true,
store: 'MyTestStore',
displayField: 'Name',
folderSort: true,
viewConfig: {
maintainFlex: true,
loadingText: 'Retrieving Data',
multiSelect: true,
simpleSelect: false
},
columns: [
{
xtype: 'gridcolumn',
text: 'Name'
}
]
}
]
});
me.callParent(arguments);
}
});

The Store:


Ext.define('MyApp.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
filterOnLoad: false,
sortOnLoad: false,
storeId: 'MyTreeStore',
defaultRootId: '/',
folderSort: false,
nodeParam: 'path',
root: {
text: 'path',
id: '/',
expanded: true
},
proxy: {
type: 'ajax',
url: '/get-it.php?action=do-it',
reader: {
type: 'json',
root: '/'
}
},
fields: [
{
mapping: 0,
name: 'Name'
}
]
}, cfg)]);
}
});

I tried to map with {0} the index 0 to the column ( also with simple 0 ), seems not to work, is there another way to do so ?
Maybe i need to redesign but i think its a matter of mapping the value to the field because i get empty lines in the view.

Thanks for any hint.

Just forgot, i am using the actual extjs version 4.1.1 !

[friend]

In short, the server-side JSON data needs to conform to what a Tree panel expects.

Tree data is expected to be in the form of:



[{
text: 'Branch',
leaf: false,
children: [{
text: 'Leaf 1',
leaf: true,
},{
text: Leaf 2',
leaf: true
},{
text: 'SubBranch',
leaf: false,
children: [{
text: 'Leaf 1',
leaf: true
}]
}]
}]

[Comister]

Hi Friend,

Thanks a lot for your answer.
Is there also a possibility to Load only the First Level and the childs will be loaded if the expansion of the element will happen ?
That was the idea behind my setup, only one level, after clicking a child, load the next one, and so on and so forth.

Thank you

[friend]

Each tree node also supports an expanded (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.NodeInterface-cfg-expanded) property which will allow you to initially display tree branches in a collapsed state.

As for lazy loading, here's an example (http://dev.sencha.com/deploy/ext-4.0.0/examples/tree/reorder.html) where nodes are loaded via a TreeStore/AjaxProxy, where the example also showcases drag and drop reordering of nodex..

[Comister]

Thanks friend, finally i was able to make it work ( without the children property ) to have an dynamic loading tree !!