views:

5812

answers:

2

I want to create Ext.tree.TreePanel component and periodically load content from the external URl. So I've written something like

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

And now I want to reload this tree, so I write:

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

And nothing happens.

add: The only way I've found is set some invalid value to dataUrl param on TreeLoader creation:

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

What you're looking for is the load method for the TreeLoader. So something like this should work given you're example.

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

Here's my full example that's available on my demo site as well. It's a little contrived and hacked together from one of the ExtJS demo's but it should get you what you need.

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

Cheers

r-dub
I think your example will stop working when you delete `{dataUrl:'get-nodes.php'}` from TreeLoader constructor call.In my case I extend Ext.tree.TreePanel, but use similar code and it doesn't work after removing `dataUrl: 'fake-url'` definition.
Sergei Stolyarov
I've updated the example to not use a dataUrl value in the constructor. Because of this the I initially disable the tree because it has no data. Click the refresh button, the tree gets loaded and enabled.
r-dub
A: 

Hi,

how can I access the children node and how can I change the text of that node?

Thanks for th help

jack