PDA

View Full Version : Creating Ext.tree.TreePanel from static JSON data in one shot



Nick
12 Apr 2007, 11:02 AM
Here's an example of an Ext tree that is created from inline (static) JSON data in one shot. This may be useful if you are not building nodes dynamically and have all the tree node data within your code. Example uses the Ext 1.0 Beta 2 library.

Example here. (http://www.mixolution.com/extjs/examples/staticTree.html)
Please view-source for the code.
http://www.mixolution.com/extjs/examples/staticTree.html

JeffHowden
12 Apr 2007, 11:32 AM
You can also take advantage of an AsyncTreeNode as your root and specify the children inline making the loop at the bottom unnecessary. I've put together something for the examples that does just that. If you have no objections, I'd be glad to add it to the examples for others to learn from.

Joe
12 Apr 2007, 12:26 PM
I really like the fact that static data was used in his example and thank you for posting.

I was having a heck of a time with Aync and got the following code working based on your code and the info from JeffHowden. Is this correct or am I doing it 'bass-ackwards'?




var Tree = Ext.tree;

var tree = new Tree.TreePanel('tree', {
animate:true,
enableDD:false,
loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false
});


// json data describing the tree
var json =
[
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
},
{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
}

];

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
});

tree.setRootNode(root);

tree.render();
root.expand();

Nick
12 Apr 2007, 12:43 PM
That looks great to me. I updated the original example to avoid the FOR loop.
Updated example here (http://www.mixolution.com/extjs/examples/staticTree02.html)
http://www.mixolution.com/extjs/examples/staticTree02.html

Thanks. If there are other, better ways to do it. Please post!

efege
20 Apr 2007, 6:11 AM
While playing with your updated example, and comparing its behavior on my local server, I noticed the following problem: if I want to select two nodes with the same text on different folders, I can do it in your original online example (which is using ext-1.0-beta2), but not on my machine (using ext-1.0).

The screenshots illustrate the problem. In both cases, I tried to select all the 10 leaves. The unselected leaves in the 2nd tree simply couldn't be selected.

Not that this is important to me right now... but anyway I'm reporting the different behavior, and waiting for someone else to confirm or clarify.

EDIT: now I see that the pairs of nodes that I couldn't select simultaneously are sharing the same id attribute. So may be this is the right behavior after all...

Animal
20 Apr 2007, 9:21 AM
Only that doesn't load ALL the nodes. It expands the root node, but the subnodes are not rendered. Look in Firebug.

You'd have to do



root.expand(true);
root.collapse(true);
root.expand()


To ensure all nodes are rendered, and finish with just the primary nodes visible.

efege
20 Apr 2007, 11:50 AM
Sorry Animal... I don't see how your reply is related to the multiple selection problem I reported above... :-/ Probably my message was not clear enough?

Animal
20 Apr 2007, 9:27 PM
OK, I was replying to Nick. Just to inform him how AsyncTreeNode works. It doesn't load child nodes until you expand the parent.

moloth
29 Aug 2007, 9:10 AM
So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?

mscdex
30 Aug 2007, 10:17 PM
So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?

I'm also curious if this is possible

hendricd
31 Aug 2007, 3:20 AM
So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?

Just keep adding more children:[] to your JSON heirarchy. :>

moloth
2 Sep 2007, 6:49 AM
Having played around with this thing a bit more as long as there are no open ended folder nodes (i.e they all have leaves at the end) then you can just use the default treeloader:


function GetTree() {
var tree = new Ext.tree.TreePanel('tree-div', {
animate:true,
loader: new Ext.tree.TreeLoader({
dataUrl:'test.php'
}),
enableDD:true,
containerScroll: true
});

// set the root node
var root = new Ext.tree.AsyncTreeNode({
text: 'Root',
draggable:false,
id:'source'

});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();

return tree;
}

Test.php


[
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
},
{"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
}]
}

]

I also read in the documentation Ext.tree.TreeLoader that load() is called each time a node is expanded...You could overload it and possibly make this do nothing?

Saeven
17 Sep 2007, 1:42 PM
I've run into a Gotcha with this however, such that when you are using static JSON to populate a tree in one shot, the child elements beyond the root level's children, are not added to the tree's nodeHash member.

The result of this, is that search functions on the tree will fail, since the subtree nodes are not indexed.

prhanna
4 Oct 2007, 9:41 AM
Is there an easier way to load static data using the treeloader and a dataurl pointing to data-json.php? Your method is great, but whenever I expand the node, it loads the whole tree again underneath the node. You are right - overloading the treeloader will do the trick - but is there a cleaner way to do this?

Any help is greatly appreciated!

hendricd
4 Oct 2007, 9:59 AM
To get the behavior you want [I think] you only need to define children (children:[] works well too) on all levels. Then the AsynchTreeLoader only fetches the node-list once.

Here is a sample node list I'm preparing for my Ext Extensions Demo site:


[{'text':'IframeContentPanel','id':'\/ipanel','leaf':false
,'children': [{
'text':'Source'
,'id':'\/ipanel\/source'
,'leaf':false
,children:[
{
'text':'IPanel.js'
,'id':'\/ipanel\/source\/ipanel'
,'leaf':true
,'src':'ux\/ipanel.js'
}


]
}
,{
'text':'Examples'
,'id':'\/ipanel\/examples'
,'leaf':false
,'children':[{
'text':'Ipanel Example 1'
,'id':'\/ipanel\/examples\/1'
,'leaf':true
}]
}
]
}
,{
'text':'ManagedBrowserWindow'
,'id':'\/mbw'
,'leaf':false
,'children': [{
'text':'Source'
,'id':'\/mbw\/source'
,'leaf':false
,children:[
{
'text':'BrowseMan.js'
,'id':'\/mbw\/source\/browseman'
,'leaf':true
,'src':'ux\/browseman.js'
}


]
}
,{
'text':'Examples'
,'id':'\/mbw\/examples'
,'leaf':false
,'children':[
{
'text':'Popup Grid with Parent callback'
,'id':'\/mbw\/examples\/popgrid'
,'leaf':true
}
,{
'text':'Ext-ized Modal Popup Window'
,'id':'\/mbw\/examples\/modalwin'
,'leaf':true
}
]
}
,{
'text':'Notes'
,'id':'\/mbw\/notes'
,'leaf':false
,children:[
{
'text':'HowTo'
,'id':'\/mbw\/notes\/howto'
,'src':'notes\/mbw.htm'
,'leaf':true
}
]
}
]
}
,{'text':'ext-basex','id':'\/basex','leaf':false
,'children': [{
'text':'Source'
,'id':'\/basex\/source'
,'leaf':false
,children:[{
'text':'ext-basex.js'
,'id':'\/basex\/source\/ext-basex'
,'leaf':true
,'src':'ovr\/ext-basex.js'
}
]}
,{
'text':'Examples'
,'id':'\/basex\/examples'
,'leaf':false
,'children':[
{
'text':'Synchronous Ajax Request'
,'id':'\/basex\/examples\/sajax'
,'leaf':true
}

]
}
]
}
]

Then..


var TP = new Treepanel();
var rootProjects = new Tree.AsyncTreeNode({
text: 'Demos',
expanded:false,
loader: (new Tree.TreeLoader({dataUrl:'demonodes.js',requestMethod : "GET"})),
draggable:false // disable root node dragging

});

TP.setRootNode(rootProjects);
TP.render();
rootProjects.expand(false, false);
Every node has (pre-fetched) kids that way.

sylvainp
12 Oct 2007, 9:07 AM
I tried the example with ext 2.0 (I needed to convert the first argument of the TreePanel constructor to the "el" property in the config parameter).

When I clicked on a folder, another one opened. I guess this is due to the fact some nodes have the same id's. I adjusted the id's so that they are unique, and it is working fine.

hendricd
12 Oct 2007, 9:10 AM
Yes, as you've just seen, each node's Id has everything to do with the tree's heirarchy. \:D/

mdissel
12 Oct 2007, 1:08 PM
See this thread for another sample
http://extjs.com/forum/showthread.php?t=13827

mleework
5 Mar 2008, 12:23 PM
I am new on Ext JS. Would you spell out what you change to TreePanel constructor to make it work in ext 2.0. I keep getting "this.root has no properties" in firebug debug window.

----------------------------------------------------------------------------------------

I tried the example with ext 2.0 (I needed to convert the first argument of the TreePanel constructor to the "el" property in the config parameter).

When I clicked on a folder, another one opened. I guess this is due to the fact some nodes have the same id's. I adjusted the id's so that they are unique, and it is working fine.

cblin
31 Mar 2008, 6:50 AM
I've run into a Gotcha with this however, such that when you are using static JSON to populate a tree in one shot, the child elements beyond the root level's children, are not added to the tree's nodeHash member.

The result of this, is that search functions on the tree will fail, since the subtree nodes are not indexed.

Have someone find a workaround for this case ?

See http://extjs.com/forum/showthread.php?t=30909 for a similar problem

egobits
7 Apr 2008, 1:24 PM
I load the JSON content from a web service (which takes around 6 seconds to get rendered). Can i show a temporary "loading" animation in the tree or Treepanel while the json is getting loaded?

phdbrianlee
9 Apr 2008, 1:05 AM
I am new on Ext JS. Would you spell out what you change to TreePanel constructor to make it work in ext 2.0. I keep getting "this.root has no properties" in firebug debug window.

----------------------------------------------------------------------------------------
you need to change the constructor of the treePanel to things like:
var tree = new Tree.TreePanel({
el: 'tree',//----------Important here
animate: true,
enableDD: false,
loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
rootVisible:false,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false
});

but I do not why my tree did not appear, anyone can do some help?

Animal
11 Apr 2008, 6:53 AM
"this.root has no properties"

Would seem to indicate that you have no root node: http://extjs.com/deploy/dev/docs/?class=Ext.tree.TreePanel&member=root

Do not use the el config.

innovator
6 Oct 2008, 2:54 AM
For tree example, i using this code on ExtJs2.0, but i am getting error in firebug "this.root is undefined". Plz help me out.


Ext.onReady(function(){

var Tree = Ext.tree;

var tree = new Tree.TreePanel( {
animate:true,
enableDD:false,
loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
renderTo: 'tree',
//el: 'tree',
rootVisible:true,

selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false
});



// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
});

tree.setRootNode(root);



//tree.render();
root.expand();

});


// json data describing the tree
var json = [
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "A4", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
]}
];

html file is:


<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>tree</title>

<link rel="stylesheet" type="text/css" href="css/setup.css" media="all" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="extjs/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="extjs/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="scripts/tree.js"></script>

</head>
<body>
<div id="tree"></div>
</body>
</html>

moegal
30 Dec 2008, 9:51 AM
Inovator,

how did you solve this? I am getting the same error.

Thanks, Marty

whodat
6 Jan 2009, 2:23 PM
I am getting this too. Anybody solve this issue?

georgiosleon
14 Jan 2009, 12:32 PM
me two same problem any solution

vanderbill
14 Jan 2009, 4:36 PM
I have same problem can any1 help???

BernieM
27 Jan 2009, 11:52 AM
I see a couple of problems with innovator's example. As Animal pointed out in the post above his, he has no root node at render time. In this thread's first example there is no renderTo in the config so we had the liberty to add a root node after the fact and then manually call the render ourselves. In innovator's example he has a renderTo set so it will automatically render the tree before it has a root. So either set the root in the tree's config or remove the renderTo and render the tree yourself after you've added the root.

As an aside, another problem I see is that he has duplicate IDs for a bunch of his nodes and this will cause really weird behavior in the tree. For example, you'll try to expand one node and others will expand instead. That's another situation that should be avoided.

Seo
3 Mar 2009, 5:58 AM
a simple change will sort out the prob; json node ?ds must be unique but they r not in this ex.

pkilczuk
10 Jun 2009, 1:40 PM
If anyone is interested, this worked for me:


// json data describing the tree
var json = [
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "A4", "id" : 2000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "200000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "200001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "200002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "200003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "200004", "leaf" : true, "cls" : "file"}
]
},
]}
];

var tree = new Ext.tree.TreePanel( {
animate:true,
enableDD:false,
loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
renderTo: document.body,
root: new Ext.tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
}),
rootVisible:true,
});

columbus30
25 Jul 2009, 11:37 PM
[QUOTE=Nick;22671]That looks great to me. I updated the original example to avoid the FOR loop.
Updated example here (http://www.mixolution.com/extjs/examples/staticTree02.html)
http://www.mixolution.com/extjs/examples/staticTree02.html


when i am trying to run this example it gives the error root is not defined.But i can see the root has been set below.Why is this not working?

columbus30
25 Jul 2009, 11:50 PM
i tried and got it working.But the problem i m facing is no matter which folder i click only last one gets expanded

columbus30
28 Jul 2009, 11:06 PM
i tried and got it working.But the problem i m facing is no matter which folder i click only last one gets expanded
There was some issues with the id I specified.

Thanks for this nice example =D>

wp.joju
11 Feb 2010, 9:04 PM
i have the following code and i'm using v3.1.1 but i'm having a script error loader is null or not an object when expanding the root node



var tree1 = new Ext.tree.TreePanel({
id:'directorytree',
loader: new Ext.tree.TreeLoader(),
border:false,
lines: true,
rootVisible:true,
selModel: new Ext.tree.MultiSelectionModel(),
containerScroll: false
});
var directorytreejson = window.external.GetDirectoryTree();
var root = new Ext.tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'source',
children: directorytreejson
});
tree1.setRootNode(root);
tree1.on('click',function(node){
comboxWithTree.setValue(node.text);
comboxWithTree.collapse();
});
comboxWithTree.on('expand',function(){
tree1.render('tree1');
});

sofian_oktavianus
16 Feb 2010, 4:09 PM
Hello Nick, i like your node. I try to make explorer page and it too hard now :(( because i can't download from extjs (maybe it for premium).

I need your help :D may you can help me to make binary node with extjs? maybe like this :
0
/\
0 0
/\ /\
0000

thank you for your help :">

wp.joju
22 Feb 2010, 3:18 AM
this is working for me now, but as i said on another post, why does the tree inside the combo box disappears when you type something into the combo box? then it won't reappear anymore not unless you reload the page...

evanc
23 Feb 2010, 4:04 PM
How should I change this to make it work in Ext 3.x?

pixl
25 Mar 2010, 8:03 AM
this is working for me now
I got the same problem - how did you solved it?

aleksa
11 Aug 2010, 11:53 AM
Is it possible to load JSON from an external file? It looks too cumbersome with JSON defined within Ext.onReady();



If anyone is interested, this worked for me:


// json data describing the tree
var json = [
{"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [
{"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
]
},
{"text" : "A4", "id" : 2000, "leaf" : false, "cls" : "folder", "children" :
[ {"text" : "Fuel Economy", "id" : "200000", "leaf" : true, "cls" : "file"},
{"text" : "Invoice", "id" : "200001", "leaf" : true, "cls" : "file"},
{"text" : "MSRP", "id" : "200002", "leaf" : true, "cls" : "file"},
{"text" : "Options", "id" : "200003", "leaf" : true, "cls" : "file"},
{"text" : "Specifications", "id" : "200004", "leaf" : true, "cls" : "file"}
]
},
]}
];

var tree = new Ext.tree.TreePanel( {
animate:true,
enableDD:false,
loader: new Ext.tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
lines: true,
renderTo: document.body,
root: new Ext.tree.AsyncTreeNode({
text: 'Autos',
draggable:false,
id:'source',
children: json
}),
rootVisible:true,
});

chirayubhatt
9 Mar 2011, 4:33 AM
Can anybody suggest how can we update the viewport while clicking on the tree node with help of ajax request ? example will work as great help..

bhoopal
12 Apr 2012, 9:29 PM
Hey Joe and Animal,

If I use the Joe code , I am getting Ext.el.dom is null or not an object.
My file didnt have this statement. It is coming from ext-all.js and ext-base.js files.
I added these two files only in my html file.
Can you help me in this time...

Advance thanks...