1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default [SOLVED] Using a tree loader without a tree panel

    [SOLVED] Using a tree loader without a tree panel


    Maybe I'm just whack for trying this but I am attempting to use a TreeLoader to help me process a nested tree-like data set. The thing is that all of the data is returned at once so I am setting preloadChildren to true. The problem is that the children never get pre-loaded, only the first level. I don't know what I am doing wrong. The json is correct and used in other areas so I have eliminated that as a problem.

    Here is some sample code to visualize:
    Code:
    var L = new Ext.tree.TreeLoader({
       preloadChildren: true,
       url: '/some/url'
    });
    
    var root = new Ext.tree.AsyncTreeNode({
       loader: L
    });
    
    L.load(root);
    Please help

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    Thanks for moving

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    I've tried calling loadComplete but I get this error:
    el is undefined
    http://.../includes/library/extjs/ext/ext-all-debug.js
    Line 144
    Code:
    L.load(root, function() {
      root.loadComplete();
    });

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    All the data at once?

    Just use straight Ajax, and create a TreeNode from it. Job done.

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    But then I have to manually process my response and iterate all the data. That is exactly what the TreeLoader can already do for me.

    Not trying to be a PITA - simply want to maximize the use of the existing libraries.

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    To help visualize, here is some sample json:
    Code:
    [{"id":"1","layout":{"region":"center"},"children":[
    {"id":"2","layout":{"region":"north"},"html":"--north--","leaf":true,"text":"North child"},
    {"id":"3","layout":{"region":"west"},"html":"--west--","leaf":true,"text":"West region"},
    {"id":"4","layout":{"region":"center"},"html":"--center--","leaf":true,"text":"Center region"}
    ],"leaf":false,"text":"Main Border Panel"}]

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,507
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You can still use the appropriate methods of a TreeLoader.

    Ensure that your config is a valid node config. An Object, not an Array. Its children property is an Array of more node configs:

    Code:
    a = {
        "id":"1",
        "layout":{"region":"center"},
        "children":[
            {"id":"2","layout":{"region":"north"},"html":"--north--","leaf":true,"text":"North child"},
            {"id":"3","layout":{"region":"west"},"html":"--west--","leaf":true,"text":"West region"},
            {"id":"4","layout":{"region":"center"},"html":"--center--","leaf":true,"text":"Center region"}
        ],
        "leaf":false,
        "text":"Main Border Panel"
    };
    var node = new Ext.tree.TreeNode(a);
    new Ext.tree.TreeLoader({preloadChildren: true}).doPreload(node);
    console.log(node);

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    Interesting approach - thanks Animal!

  9. #9
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    628
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    I got my original example working after a few adjustments so I am posting in case it helps others.

    Code:
    var L = new Ext.tree.TreeLoader({
       preloadChildren: true,
       url: '/some/url'
    });
    
    var root = L.createNode({ text: 'root' });
    
    L.load(root, function(loader, node) {
       //node will be the same as root, which doesn't have a children attribute
       loader.doPreload(node.firstChild);
    });

Thread Participants: 1