1. #1
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    287
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default [3.0] Solution for a Local Tree

    [3.0] Solution for a Local Tree


    Hi all,

    This is not a real extension, but more a tip: I needed a local tree that does not load data from the server, but is loaded from an array client side.
    AFAIK, the TreePanel is configured to always go to the server to request data, which is not what I wanted.

    Now the treeLoader, nor the ASyncTreeLoader have a mode='local' property, like the Store.
    So here's my solution to use a 'mode=local' tree:

    Code:
    MyTree = Ext.extend(Ext.tree.TreePanel, {
        layout : 'fit',
        initComponent : function() {
            this.root = {
                id :'root',
                text :'Root',
                draggable :false,
                type :'folder',
                expand :true,
                leaf: false,
                loaded:true
            };
            
            this.loader = new Ext.tree.TreeLoader({
                baseAttrs: {loaded: true} // Makes every ASyncNode think it's already loaded
            });
                   
            MyTree.superclass.initComponent.call(this);
        },
        loadData : function(node, data) {
            if(Ext.isString(data)) {
                 try {
                     data = Ext.decode(data);
                 }catch(e){
                     alert('error!'+e);
                     return;
                 }    
            }
            // data is supposed to be an array now
            try {
                node.beginUpdate();
                this.loadNode(node, data);
                node.endUpdate();
            }catch(e){
                alert('error!'+e);
            }
            this.root.expand();
        },
        loadNode: function(node, data) {
            for(var i = 0, len = data.length; i < len; i++) {
                var d = data[i];
                var n = this.loader.createNode(d);
                if(n){
                    node.appendChild(n);
                }
                for(var p in d) {
                    if(Ext.isArray(d[p])) {
                        var subNode = this.loader.createNode({
                            text: p,
                            leaf: false
                        });
                        if(subNode){
                            n.appendChild(subNode);
                        }
                        this.loadNode(subNode, d[p]);
                    }
                }
            }
        },
        ...
    }
    In your clientcode, you can now load the tree via:

    Code:
    MyTree.loadData(this.root, 
      [{id:123, text:'sub1', kids:[{id:11, text:'sub1-1'},{id:12, text:'sub1-2'}]}]
    );
    Bear in mind that when reloading nodes, you might need to delete them first...

    Ronaldo
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    But Ext already has support for this:
    Code:
    var node = new Ext.tree.TreeNode();
    var tree = new Ext.tree.TreePanel({
    	title: 'TreePanel',
    	rootVisible: false,
    	autoScroll: true,
    	loader: new Ext.tree.TreeLoader({
    		preloadChildren: true
    	}),
    	root: node
    });
    new Ext.Viewport({
    	layout: 'fit',
    	items: tree
    });
    node.attributes.children = [{
    	text: 'Branch 1',
    	expanded: true,
    	children: [{
    		text: 'Leaf 1a',
    		leaf: true
    	},{
    		text: 'Leaf 1b',
    		leaf: true
    	}]
    },{
    	text: 'Leaf 2',
    	leaf: true
    }];
    node.getLoader().load(node);
    (or directly specify the children as a config option of the root node - that way you don't need to load anything)

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

      0  

    Default


    or

    Code:
    var node = new Ext.tree.AsyncTreeNode({
        children: [{
    	text: 'Branch 1',
    	expanded: true,
    	children: [{
    		text: 'Leaf 1a',
    		leaf: true
    	},{
    		text: 'Leaf 1b',
    		leaf: true
    	}]
        },{
    	text: 'Leaf 2',
    	leaf: true
        }]
    });
    var tree = new Ext.tree.TreePanel({
    	title: 'TreePanel',
    	rootVisible: false,
    	autoScroll: true,
    	loader: new Ext.tree.TreeLoader({
    		preloadChildren: true
    	}),
    	root: node
    });
    new Ext.Viewport({
    	layout: 'fit',
    	items: tree
    });

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    That's what my footnote said.

    ps. You can even simplify that to:
    Code:
    var node = {
        children: [{
    	text: 'Branch 1',
    	expanded: true,
    	children: [{
    		text: 'Leaf 1a',
    		leaf: true
    	},{
    		text: 'Leaf 1b',
    		leaf: true
    	}]
        },{
    	text: 'Leaf 2',
    	leaf: true
        }]
    };

  5. #5
    Sencha User Ronaldo's Avatar
    Join Date
    Jul 2007
    Location
    Enschede, The Netherlands
    Posts
    287
    Vote Rating
    0
    Ronaldo is on a distinguished road

      0  

    Default


    Ai, so many options... Thanks, I didn't find it.

    My loadData method however provides a little bonus then; the recursive method converts all nested array properties to child nodes. Thus, the data I provide doesn't have to have a 'children' property, but can simply be a nested array.

    Ronaldo
    Ronald van Raaphorst aka Ronaldo
    I'm a freelance software developer in Java, PHP, and ExtJs.


    Skyperonald_twensoc
    Mailinfo@twensoc.nl

  6. #6
    Banned
    Join Date
    Mar 2009
    Posts
    1
    Vote Rating
    0
    0411020211 is on a distinguished road

      0  

    Exclamation


    I have tried all above,they work well in FF but none of them work in Ext3.0 & IE7.
    please help!!!

  7. #7
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Define 'doesn't work'...

    ps. Are you sure you don't have a trailing comma somewhere in your code?