how to build tree in EXTJS?

问题:

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 ????

回答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'
});

回答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();
});

回答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.