如何根据需要重新加载Ext.tree.TreePanel?

时间:2009-10-15 09:51:07

标签: javascript extjs

我想创建Ext.tree.TreePanel组件并定期从外部URl加载内容。所以我写了像

这样的东西
 new Ext.tree.TreePanel({
        root: {
            nodeType: 'async',
            text: 'asdasd',
            draggable: false,
            id: 'folders-tree-root'
        },
        loader: new Ext.tree.TreeLoader()
});

现在我想重新加载这棵树,所以我写道:

tree.loader.dataUrl = 'folders-sample.json';
tree.root.reload();

没有任何反应。

添加: 我找到的唯一方法是在dataUrl创建时为TreeLoader参数设置一些无效值:

 new Ext.tree.TreePanel({
        root: {
            nodeType: 'async',
            text: 'asdasd',
            draggable: false,
            id: 'folders-tree-root'
        },
        loader: new Ext.tree.TreeLoader(dataUrl: 'something')
});

1 个答案:

答案 0 :(得分:7)

您正在寻找的是TreeLoader的load方法。所以这样的事情应该适用于你的例子。

tree.getLoader().load(tree.root);

这是我的demo网站上提供的完整示例。它是一个有点人为的,并且从ExtJS演示版中一起被黑客入侵,但它应该能满足你的需求。

Ext.onReady(function() {
    var root = new Ext.tree.AsyncTreeNode({
        text: 'Ext JS',
        id: 'src'
    });
    var reloadTree = function() {
        tree.enable();
        tree.getLoader().dataUrl = 'get-nodes2.php';
        tree.getLoader().load(tree.root);
    };

    var tree = new Ext.tree.TreePanel({
        animate: true,
        autoScroll: true,
        nodeType: 'async',
        loader: new Ext.tree.TreeLoader(),
        containerScroll: true,
        border: false,
        disabled: true,
        id: 'myTree'
    });

    var myPanel = new Ext.Panel({
        items: tree,
        border: false,
        tbar: [{
            text: 'Refresh',
            handler: reloadTree
        }]
    });

    tree.setRootNode(root);
    myPanel.render('tree');
});

干杯