Results 1 to 7 of 7

Thread: Help with loading data for Tree

  1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    29

    Default Help with loading data for Tree

    Hi,
    could you guys show me how am i able to dynamically load a childnode by calling a php file with id of a clicked element?
    I was trying to get this information from the examples, but the logic is bit hidden for me ...
    Thanks
    D>

    Code:
    Ext.onReady(function(){
        var tree = new Ext.tree.TreePanel({
            renderTo:'tree-div',
            width: 400,
            autoScroll:true,
            animate:true,
            containerScroll: true,
            rootVisible: true,
            root: {
                nodeType: 'async',
                text: 'Test',
                id: 'src'
            },
            
            dataUrl: 'testTree.php',
            
        });
        tree.getRootNode().expand();
    });
    
    'testTree.php' - to get data for tree
    
    [{
        text: 'To Do', 
        cls: 'folder',
        children: [{
            text: "Go jogging",
            leaf: true
        },{
            text: 'Take a nap',
            leaf: true
        },{
            text: 'Climb Everest',
            leaf: true
        }]
    },{
        text: 'Remodel Project', 
        cls: 'folder',
        children: [{
            text: 'Finish the budget',
            leaf: true
        },{
            text: 'Call contractors',
            leaf: true
        },{
            text: 'Choose design',
            leaf: true
        }]
    },{
        text: 'test2', 
        cls: 'folder'
        // ,children: {url: 'test.php?node=test2'}
    }
    ]

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,488

    Default

    You already have everything you need. Put the response for each level in your php code. The id of each node will be posted to the server side as they open each individual node. Only specify children and/or leaf if you don't want the tree to return back to the server-side to get the children of that node.

    Watch this sample in Firebug:
    http://www.extjs.com/deploy/dev/exam...two-trees.html

    Notice how as you open an individual child node it posts the node id and the server-side responds with a different set of children.
    Aaron Conran
    @aconran

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You could use:
    Code:
    {
        text: 'test2', 
        cls: 'folder'
        loader: new Ext.data.TreeLoader({url: 'test.php?node=test2'})
    }
    Another method would be to set the url of the loader in the beforeload event.

    ps. Appending parameter node=test2 is the default if you configure the node with id:'test2'.

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Posts
    29

    Default

    @Condor
    i have tried to put there
    Code:
    loader: new Ext.data.TreeLoader({dataurl: 'test.php?node=test2'})
    But when i click on test2 node, testTree.php is called and not test.php ...
    Thanks for any other tips

  5. #5
    Sencha User
    Join Date
    Sep 2009
    Posts
    29

    Default

    Hi,
    any idea why it does not work for me ?
    Thanks
    D.

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    'dataurl' is not a valid config option. It's either 'dataUrl' or 'url'.

  7. #7
    Sencha User
    Join Date
    Sep 2009
    Posts
    29

    Default

    Hi again.

    It's still not working, by adding lines below into the testtree.php makes the tree empty, without any nodes.
    Any ideas why ?
    Isnt it because those lines should not be inside that text file, from which the basic tree structure is created ?

    Thanks again

    Code:
    {
     text: 'test2', 
     cls: 'folder',
     loader: new Ext.data.TreeLoader({dataUrl: 'test.php'})
    // or loader: new Ext.data.TreeLoader({url: 'test.php'})
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •