1. #1
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    Nick is on a distinguished road

      0  

    Smile Creating Ext.tree.TreePanel from static JSON data in one shot

    Creating Ext.tree.TreePanel from static JSON data in one shot


    Here's an example of an Ext tree that is created from inline (static) JSON data in one shot. This may be useful if you are not building nodes dynamically and have all the tree node data within your code. Example uses the Ext 1.0 Beta 2 library.

    Example here.
    Please view-source for the code.
    http://www.mixolution.com/extjs/examples/staticTree.html

  2. #2
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    You can also take advantage of an AsyncTreeNode as your root and specify the children inline making the loop at the bottom unnecessary. I've put together something for the examples that does just that. If you have no objections, I'd be glad to add it to the examples for others to learn from.
    Jeff Howden
    Ext JS - Support Team Volunteer
    jeff@extjs.com

    Any and all code samples that are authored by me and posted on the Ext forums or website are hereby released into the public domain and I release anyone or entity of liability by using said code samples unless explicitly stated otherwise.

    Opinions are mine and not necessarily endorsed by Ext, LLC. Please do not contact me directly for assistance unless requested by me.

  3. #3
    Ext User Joe's Avatar
    Join Date
    Apr 2007
    Posts
    243
    Vote Rating
    0
    Joe is on a distinguished road

      0  

    Default I like the static data example

    I like the static data example


    I really like the fact that static data was used in his example and thank you for posting.

    I was having a heck of a time with Aync and got the following code working based on your code and the info from JeffHowden. Is this correct or am I doing it 'bass-ackwards'?

    Code:
        var Tree = Ext.tree;
    
        var tree = new Tree.TreePanel('tree', {
            animate:true,
            enableDD:false,
    	loader: new Tree.TreeLoader(), // Note: no dataurl, register a TreeLoader to make use of createNode()
    	lines: true,
    	selModel: new Ext.tree.MultiSelectionModel(),
            containerScroll: false
        });
    
    
        // json data describing the tree
    	var json = 
    [ 
     {"text" : "Audi", "id" : 100, "leaf" : false, "cls" : "folder", "children" : [ 
        {"text" : "A3", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
            ]
        },
        {"text" : "TT", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
            ]
        }]
     },
     {"text" : "Cadillac", "id" : 300, "leaf" : false, "cls" : "folder", "children" : [ 
        {"text" : "CTS", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
            ]
        },
        {"text" : "CTS-V", "id" : 1000, "leaf" : false, "cls" : "folder", "children" : 
            [ {"text" : "Fuel Economy", "id" : "100000", "leaf" : true, "cls" : "file"},
              {"text" : "Invoice", "id" : "100001", "leaf" : true, "cls" : "file"},
              {"text" : "MSRP", "id" : "100002", "leaf" : true, "cls" : "file"},
              {"text" : "Options", "id" : "100003", "leaf" : true, "cls" : "file"},
              {"text" : "Specifications", "id" : "100004", "leaf" : true, "cls" : "file"}
            ]
        }]
     }
    
    ];
    
        // set the root node
        var root = new Tree.AsyncTreeNode({
            text: 'Autos',
            draggable:false,
            id:'source',
            children: json
        });
    
        tree.setRootNode(root);
    
        tree.render();
        root.expand();
    Joseph Francis,
    CoreLan / Meeting Consultants

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    Nick is on a distinguished road

      0  

    Default


    That looks great to me. I updated the original example to avoid the FOR loop.
    Updated example here
    http://www.mixolution.com/extjs/exam...ticTree02.html

    Thanks. If there are other, better ways to do it. Please post!

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    0
    efege is on a distinguished road

      0  

    Question Multiple selection bug?

    Multiple selection bug?


    While playing with your updated example, and comparing its behavior on my local server, I noticed the following problem: if I want to select two nodes with the same text on different folders, I can do it in your original online example (which is using ext-1.0-beta2), but not on my machine (using ext-1.0).

    The screenshots illustrate the problem. In both cases, I tried to select all the 10 leaves. The unselected leaves in the 2nd tree simply couldn't be selected.

    Not that this is important to me right now... but anyway I'm reporting the different behavior, and waiting for someone else to confirm or clarify.

    EDIT: now I see that the pairs of nodes that I couldn't select simultaneously are sharing the same id attribute. So may be this is the right behavior after all...
    Attached Images
    Last edited by efege; 20 Apr 2007 at 6:25 AM. Reason: same id

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

      0  

    Default


    Only that doesn't load ALL the nodes. It expands the root node, but the subnodes are not rendered. Look in Firebug.

    You'd have to do

    Code:
        root.expand(true);
        root.collapse(true);
        root.expand()
    To ensure all nodes are rendered, and finish with just the primary nodes visible.

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Bah
    Posts
    434
    Vote Rating
    0
    efege is on a distinguished road

      0  

    Default


    Sorry Animal... I don't see how your reply is related to the multiple selection problem I reported above... Probably my message was not clear enough?

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

      1  

    Default


    OK, I was replying to Nick. Just to inform him how AsyncTreeNode works. It doesn't load child nodes until you expand the parent.

  9. #9
    Ext User
    Join Date
    Aug 2007
    Posts
    11
    Vote Rating
    0
    moloth is on a distinguished road

      0  

    Default Time for a newb question

    Time for a newb question


    So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?

  10. #10
    Ext User
    Join Date
    Aug 2007
    Posts
    60
    Vote Rating
    0
    mscdex is on a distinguished road

      0  

    Default


    Quote Originally Posted by moloth View Post
    So if i was producing a php file to spit this all out say json-data.php how would you go about loading it only once? Through a data store or something else?
    I'm also curious if this is possible