how to build tree in EXTJS? - extjs

Question

How to build a tree in EXTJS ? It has to include the images(with '+' & '-' symbols) with respective node.Can you get me the code for the same ????

Answer 1

Start by defining an Ext.data.TreeStore to load your data into:
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'treeData.json'
},
root: {
text: 'Countries',
expanded: true
}
});
Json:
[{
"text": "United Kindom",
"children": [{
"text": "Glasgow",
"leaf": true
}, {
"text": "Edinburgh",
"leaf": true
}, {
"text": "London",
"leaf": true
}],
"leaf": false
},
{
"text": "France",
"leaf": true
}
...
]
Create the Tree Panel and render it to the document's body:
Ext.create('Ext.tree.Panel', {
title: 'Countries & Cities',
width: 500,
height: 300,
store: store,
useArrows: false,
rootVisible: false,
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

Answer 2

Just look at the source code for any of the Ext JS Tree demos.
For example:
Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
// auto create TreeLoader
dataUrl: 'get-nodes.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable: false,
id: 'src'
}
});
// render the tree
tree.render('tree-div');
tree.getRootNode().expand();
});

Answer 3

This looks like a good example: static tree for a static tree.
Saki makes a lot of tutorials and examples that are very helpful for EXTJS. One of Saki's Examples is an asynchronous tree. You can find it by looking to the left under state.
This seems like a good tutorial for a dynamic tree with a Ruby on Rails backend: dynamic tree with RoR backend.