View Full Version : how to reload a treepanel by defferent parameter?

27 Jun 2008, 7:54 AM
I have a treepanel,which at the top of it place a combobox toolbar.
when combobox selected send a selectedvalue .
like this:

var selectvalue=this.getValue();

my question is how to write the function myTreeCreat( selectvalue),
assumed I use getRootNode(selectvalue) get the tree root node.
like this:
thus I have pass the parameter "selectvalue" to get the tree root node.
but I want to know how to pass a " defferent root" to the treepanel and reload it.
I have searched all forums,and get nothing on this.

any one help me?

27 Jun 2008, 8:42 PM
anyone can help me?

27 Jun 2008, 9:39 PM
I do not think I have a clear understanding about your all your problem but I will try to help you on the tree problem.

If you want to load a different set of tree nodes, first you can get the root node using the TreePanel.getRootNode() (http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel) and replace its child with different set of nodes by calling TreeNode.removeChild() and TreeNode.appendChild() (http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreeNode) or you can just create a new TreePanel altogether.

28 Jun 2008, 6:57 AM
I think I follow you here as I am having the same problem figuring this out.

Using the code from the ext tree example:

var Tree = Ext.tree;

var tree = new Tree.TreePanel({
ddGroup : 'center',
collapsible: true,
shadow: true,
containerScroll: true,
loader: new Tree.TreeLoader({

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'music',

// render the tree

This works great, I get a tree with everything in the "music" directory.

Now as a simple example, I want a button that switches to another directory under my root called "movies". I've tried many different ways but I can't get a handle on the original tree object to change the root node and reload it.

var buttonHandler = function(button,event) {

var newRoot = new Tree.AsyncTreeNode({
text: 'movies',

tree.render(); //doesn't work
tree.getRootNode().reload(); //doesn't work
tree.getLoader().load(newRoot); //doesn't work


I'm sure there is a simple answer, but I'm stuck.

Thanks in advance for any assistance.


edit: Not trying to hijack the thread with my example. I just think woog and I are both missing the same thing conceptually about how the TreePanel can be reset/updated so I wanted to add some more context to the question.

28 Jun 2008, 10:52 AM
thanks franciscallo! I have tried your method. it does't work.
anything else I have tried some method like this:

ui.remove(); //does't work.
unregisterNode(currentRoot); //does't work.
removeChild(); //does't work.

I 'm sure that I have got the correct different RootNodes of the tree.
and it display correct at the first time of this tree load.
I use the AsyncTreeNode() to get the different treeRootNodes by different urls.

but the parameter pass to AsyncTreeNode() at the second time ,it point me:

or "A is undefined[Break on this error] Ext.tree.TreeEventModel=function(A){this...enable:function(){this.disabled=false}};"
or"R is undefined[Break on this error] Ext.DomHelper=function(){var L=null;var ... N=A(O);return new Ext.Template(N)}}}();"

it seems Ext has no driver to process this problem.
the rootnode of treepanel is unvariable.
any one can give me a help?

28 Jun 2008, 6:24 PM
I think usability wise, it is not good to change the content of the tree but since I do not know how your whole app work, I will leave that up to you.

Woog: If you could post your code that would me help you a lot better.

Rossbates: Why dont you just show in the tree your music and movies folder and let them expand which folder they like?

If you still would like to change the content of your whole tree, you can just get the loader, point that dataUrl to somewhere else and/or update the base params, and reload the tree.


29 Jun 2008, 6:58 AM
I think usability wise, it is not good to change the content of the tree but since I do not know how your whole app work, I will leave that up to you.

The reason I would want the tree root to change is if the user wanted to quickly navigate a non-contiguous section of the filesystem. For example the "file open" dialog in XP, or the favorites panel in KDE's Dolphin. The left hand panel allows you to jump from Desktop, to home, to music, etc..... the right hand panel is always relative. When navigating you think of the right panel as "everything below what I just selected on the left".

That being said, I really don't want to change the URL of the TreeLoader I just want to pass a different id for the root of my AsyncTreeNode so the php handler knows where to "move" across the filesystem.

When I try it this way:

var root2 = new Tree.AsyncTreeNode({text: 'home', id:'home'});
the tree.setRootNode() function works but I get a 'c has no properties error' on the tree.root.reload().

Note that this is an event after the initial tree has been fully setup and rendered sucessfully.

All I really want to do is change the id of the AsyncTreeNode before reload and I'm missing a method or syntax for making it happen.

Thanks for the help!

29 Jun 2008, 7:31 AM
Well from reading the forums for a while I know these threads will often end with "that was easy".

tree.root.id = 'foo';
I sure wandered off into the weeds on this one. Doh!

29 Jun 2008, 8:57 AM
I am not sure if changing the id is the better way but I think you are better off of just changing the baseParams and reload the node just like I said on my previous post. Its much cleaner that way and that is what baseParams is for.

29 Jun 2008, 12:08 PM
Hi franciscallo - I follow your logic now. Just leave root untouched then make the changes you need to "move across" the filesystem using a combo of:


The reason I was going the other route is that I am using an AsyncTreeNode class and the nodes are built dynamically behind the scenes with php/json. Instead of iteratively removing children then appending them based on an event it was just a matter of changing the root path and reloading.

If that is a bad practice I'll use the other method.

This is clicking now, thanks for your patience.

16 Jul 2008, 12:10 PM
I am not sure if changing the id is the better way but I think you are better off of just changing the baseParams and reload the node just like I said on my previous post. Its much cleaner that way and that is what baseParams is for.

So how do you do that exatcly,

I have the following, depending on the id, the tree changes:

var treePanel = new Ext.tree.TreePanel({
id: 'tree-panel',
title: 'Hierarchy',
split: true,
height: 300,
minSize: 150,
autoScroll: true,

// tree-specific configs:
rootVisible: false,
lines: false,
singleExpand: true,
useArrows: true,

loader: new Ext.tree.TreeLoader({

root: new Ext.tree.AsyncTreeNode()
});So now I want to reload this tree with id 2222,

I dont get how you extract the TreeLoader, change its baseParams and reload the tree.

ideally it would be:

treePanel.loader.baseParams ={
treePanel.load()but that doesnt work ... any ideas, thx...

16 Jul 2008, 9:32 PM
There are alot of ways to do this and here is one.

treePanel.getLoader().on('beforeload', function() {
Ext.apply(this.baseParams, {
id: 2222


In your TreePanel config, its cleaner if you do this.

loader: new Ext.tree.TreeLoader({
dataUrl: 'js/json/tree-data.cfm',
baseParams: {
id: 1111

You can see a similar example on the link I posted earlier and _alot_ more in the Ext examples.

17 Jul 2008, 5:29 AM
I have been looking at the examples. But its easy to get lost when you're new to ExtJS.

Thx again for the help though, much appreciated.

17 Jul 2008, 8:30 AM
No problem, I understand. I was once new to ExtJS :)

15 Sep 2008, 8:26 PM
Thanks all of my responser!