Question

如何在EXTJS中构建树？它必须包含相应节点的图像（带有'+'和' - '符号）。你可以得到相同的代码????

Answer 1

首先定义Ext.data.TreeStore以将数据加载到：

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
}
...
]

创建树面板并将其渲染到文档的正文：

Ext.create('Ext.tree.Panel', {
    title: 'Countries &amp; Cities',
    width: 500,
    height: 300,
    store: store,
    useArrows: false,
    rootVisible: false,
    renderTo: Ext.getBody(),
    style: 'margin: 50px'
});

Answer 2

只需查看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

这看起来是一个很好的例子：static tree用于静态树。

Saki制作了许多对EXTJS非常有帮助的教程和示例。 Saki's Examples之一是异步树。您可以通过查看状态下的左侧找到它。

对于带有Ruby on Rails后端的动态树来说，这似乎是一个很好的教程：dynamic tree with RoR backend。

如何在EXTJS中构建树？

3 个答案: