1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
| <!-- vim: ts=2:sw=2:nu:fdc=2:spell
Building a tree from static data example
@author Ing.Jozef Sakáloš
@copyright (c) 2008, by Ing. Jozef Sakáloš
@date 4. April 2008
@version $Id$
@license example.html is licensed under the terms of the Open Source
LGPL 3.0 license. Commercial use is permitted to the extent that the
code/component(s) do NOT become part of another Open Source or Commercially
licensed development library or toolkit without explicit permission.
License details: http://www.gnu.org/licenses/lgpl.html
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<link id="theme" rel="stylesheet" type="text/css" href="empty.css">
<link rel="stylesheet" type="text/css" href="../css/icons.css">
<link rel="stylesheet" type="text/css" href="../css/application.css">
<link rel="shortcut icon" href="../img/extjs.ico">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var children = [{
text:'First Level Child 1'
,children:[{
text:'Second Level Child 1'
,leaf:true
},{
text:'Second Level Child 2'
,leaf:true
}]
},{
text:'First Level Child 2'
,children:[{
text:'Second Level Child 1'
,leaf:true
},{
text:'Second Level Child 2'
,leaf:true
}]
}];
Ext.onReady(function(){
var tree = new Ext.tree.TreePanel({
loader:new Ext.tree.TreeLoader()
,width:200
,height:400
,renderTo:Ext.getBody()
,root:new Ext.tree.AsyncTreeNode({
expanded:true
,leaf:false
,text:'Tree Root'
,children:children
})
});
});
</script>
<title id="title">Building A Tree From Static Data</title>
</head>
<body>
</body>
</html>
<!-- eof --> |
14 Responses to “How to build a Tree from static data”
Saki,
Thank you for providing the most elegant solution to this problem. You\’re an asset to the Ext community,
~Arik
By Arik on Apr 23, 2008
Take a look also at ArrayTree Extension. It uses data from this article.
By jsakalos on Apr 23, 2008
Jozef,
This worked in ExtJs 2.1.
But now, in ExtJs 2.2 it seems to be broken. Do you have an update on the article?
By Tbo on Aug 11, 2008
Can’t edit my previous comment. The solution is to remove loaded:true in the ASyncTreeNode config.
By Tbo on Aug 11, 2008
hai saki…
i have some problems with the panel.
i have the dinamic tree (base on database), when i click the node (output is url to an extjs formPanel\’s file), i want this formPanel to be displayed to a panel.
but the fact, the formPanel wouldnot render/appear to that panel…:(
please help me..
thanks
regards
By edor on Sep 4, 2008
@edor,
it is better to handle specific problems/questions on an Ext forum where other people can help you too.
By Saki on Sep 15, 2008
Saki,
You\’ve got some great examples and are a great asset to those learning Ext. Could you please update this example so that it will correctly work with Ext 2.2. Line 61 in your js source above should be removed and it will work like a charm again.
By mjack003 on Nov 27, 2008
After run this program, why it only displays \\
By deardeer76 on Feb 13, 2009
Why the tree displayed only shows “Tree Root”, no children???
Thanks!
By deardeer76 on Feb 13, 2009
I use ext 2.2.1, but only display the “Tree Root”, no children. What’s the problem?
By deardeer76 on Feb 13, 2009
Now it will work
By Saki on Feb 13, 2009
Thanks for clear example. It works with Ext3 without problem.
By jsonx on Aug 26, 2009
Thank you.
Works fine. Clear example…
By Turgut on Aug 6, 2010
I hope Senchas payroll
By joe on Aug 16, 2010