PDA

View Full Version : Problem displaying tree's data: folders not expandable



Orcyano
21 May 2013, 2:53 PM
Hello,

i got a rather funny problem regarding trees:
When i create my treepanel direct in my view, i get all folders expanded as wished.
But when i define an extra view for my treepanel, i can neither expand my folders / close them, nor show their children.

This produces the wished output:

Ext.define("TeamTool.view.filemanager.tree.fflistPanel",{ extend: 'Ext.panel.Panel',
alias: 'widget.fflistpanel',

cls: 'fm_treeview_wrapper',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
// {
// xtype: 'fflist',
// flex: 1,
// border: false,
// id: 'filemanager_tree',
// autoScroll: true
// }
Ext.create("Ext.tree.Panel",{
flex: 1,
border: false,
id: 'filemanager_tree',
autoScroll: true,

root: {
text: 'filemanager_eg_data',
expanded: true,
children: [
{
text: 'TestFolder',
expanded: true,
children: [
{
text: 'testSimple.odt',
leaf: true
}
]
},
{
text: 'TestSrcFolder',
expanded: true,
children: [
{
text: 'testSimple.doc',
leaf: true
}
]
},
{
text: 'testSimple.txt',
leaf: true
}
]
},
})
]
});
43909

But this code instead produces a tree with depth 1 only:

Ext.define("TeamTool.view.filemanager.tree.fflistPanel",{ extend: 'Ext.panel.Panel',
alias: 'widget.fflistpanel',

cls: 'fm_treeview_wrapper',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'fflist',
flex: 1,
border: false,
id: 'filemanager_tree',
autoScroll: true
}
// Ext.create("Ext.tree.Panel",{
// flex: 1,
// border: false,
// id: 'filemanager_tree',
// autoScroll: true,
//
// root: {
// text: 'filemanager_eg_data',
// expanded: true,
// children: [
// {
// text: 'TestFolder',
// expanded: true,
// children: [
// {
// text: 'testSimple.odt',
// leaf: true
// }
// ]
// },
// {
// text: 'TestSrcFolder',
// expanded: true,
// children: [
// {
// text: 'testSimple.doc',
// leaf: true
// }
// ]
// },
// {
// text: 'testSimple.txt',
// leaf: true
// }
// ]
// },
// })
]
});
43910

My fflist file is defined as follows:

Ext.define("TeamTool.view.filemanager.tree.fflist",{ extend: 'Ext.tree.Panel',
alias: 'widget.fflist',

root: {
text: 'filemanager_eg_data',
expanded: true,
children: [
{
text: 'TestFolder',
expanded: true,
children: [
{
text: 'testSimple.odt',
leaf: true
}
]
},
{
text: 'TestSrcFolder',
expanded: true,
children: [
{
text: 'testSimple.doc',
leaf: true
}
]
},
{
text: 'testSimple.txt',
leaf: true
}
]
},
});

Thanks for any help or hint about my problem!
I'll have huger structures containing toolbars and other things later, so i would appreciate it, if i'd have my own view for handling my tree and only defining it's layout and config in the fflistpanel file.

Farish
21 May 2013, 11:05 PM
Which ExtJS version are you using? It works perfectly in ExtJS 4.2.0. See example below:

http://jsfiddle.net/N7tDM/

Orcyano
22 May 2013, 1:04 AM
Hello Farish,

thanks for your reply, it's extjs 4.2 yes.

I should have been more specific how the problem might be reproduced.
I'm doing the Ext.application thing to create my app. With the auto create viewport option set true.
It's somewhat a nested structure, the viewport ist set to layout: 'fit', containing a toolbar on the top, and a tab panel below, filling the rest of the page.
I'm working on the 1. Tab right now, which is the filemanager, which i need the tree for.
The filemanager has the document tree on the left side, and a detail view (made of a panel) for files/folders on the right side.
You see, the problem occurs somewhat deep inside my views, after one view calling another and so on.

I didn't think about trying again with some other application logic like Ext.onReady, but i'll definitly give it a try when i'm back home, then i can tell whether it's caused by some other mistake within my code or whether i'm missing something about Ext.application.
And i definitly will try to make my code somewhat simpler for finding this problem.

Thanks again for any help!
I'll update this post when i'm home again and had some time to try find the problem again.

EDIT:
Sorry for posting all of this non-sence, can be closed. Seems that my browser somehow kept the js code in the cache, even after telling him to reload the sources. (chrome -> dev tools -> sources tab, click one source then press f5 ... normally does the job).
Never thought that this might ever be able to trap me after all this years :"> :s
Thanks for the fiddle anyways, Farish!