how to build tree in 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'
});