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
})
});
});
Building A Tree From Static Data
I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.
Latest posts by saki (see all)
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
17 Responses
good work, thank you very much.
I hope Senchas payroll 😉
Thank you.
Works fine. Clear example…
Thanks for clear example. It works with Ext3 without problem.
Now it will work
I use ext 2.2.1, but only display the “Tree Root”, no children. What’s the problem?
Why the tree displayed only shows “Tree Root”, no children???
Thanks!
After run this program, why it only displays \
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.
@edor,
it is better to handle specific problems/questions on an Ext forum where other people can help you too.
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
Can’t edit my previous comment. The solution is to remove loaded:true in the ASyncTreeNode config.
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?
Take a look also at ArrayTree Extension. It uses data from this article.
Saki,
Thank you for providing the most elegant solution to this problem. You’re an asset to the Ext community,
~Arik