1. #1
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    0
    andrea.chiozzi@metislab.net is on a distinguished road

      0  

    Default Problem using Multiple tree, TreePanel

    Problem using Multiple tree, TreePanel


    Hi all,
    I want to construct a Panel with a TabPanel inside and put a TreePanel into each tab (see the first attached image).
    When I try to insert the second tree into the tab 'Categoria test' it is not added to the tab but appears under the first tree (see the second attached image).
    It seem to be an id collision, but I can't find where the problem is...
    Firebug does not show any errors.
    Please help!!
    Thanks,
    Marco


    This is the html code:
    Code:
    <html>
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    	<title>2 Lonely Trees</title>
    	<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
     	<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>	
        <script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
    	<script type="text/javascript" src="tree.js"></script>
    	<script type="text/javascript" src="main.js"></script>
    	
    	<link rel="stylesheet" type="text/css" href="base.css" />
    	    
    	<script type="text/javascript">
    		Ext.onReady(digitalAsset.app.init, digitalAsset.app);
        </script>
    </head>
    
    
    <body>
    	<div id="sta_minchia"></div>
    	<div id="thumbnails"></div>
    		
    	<div id="tree-div" style="overflow: auto; height: 300px;"></div>
    	<div id="tree-category-div" style="overflow: auto; height: 244px;"></div>
    	
    	<div id="status_bar">Ready</div>
    </body>
    
    </html>

    tree.js:
    Code:
    var TreeCreator = function(){
        var Tree = Ext.tree;
        
        var tree = new Tree.TreePanel({
            el:'tree-div',
            animate:true, 
            autoScroll:true,
            loader: new Tree.TreeLoader({dataUrl:'getTreeCategoryNodes.php'}),
            enableDD:true,
            containerScroll: true,
            dropConfig: {appendOnly:true}
        });
        
        var root = new Tree.AsyncTreeNode({
            text: 'Ext JS', 
            draggable:false, // disable root node dragging
            id:'async-root'
        });
        
        //--------------------------------------------
        
        var tree2 = new Tree.TreePanel({
            el:'tree-category-div',
            animate:true,
            autoScroll:true,
            loader: new Tree.TreeLoader({dataUrl:'getTreeCategoryNodes.php'}),
            containerScroll: true,
            enableDD:true,
            dropConfig: {appendOnly:true}
        });
                    
        var root2 = new Tree.AsyncTreeNode({
            text: 'My Files', 
            draggable: false, 
            id:'async-cat-root'
        });
    	
        
                
        return {
            init : function(){
                
                tree.setRootNode(root);
                tree.render();
                root.expand(false, /*no anim*/ false);
                
                //-------------------------------------------------------------
                            
                tree2.setRootNode(root2);
                tree2.render();
                root2.expand(false, /*no anim*/ false);
            },
            
            getTree: function() { return tree; },
            
            getTree2: function() { return tree2; }
        };
    }();


    main.js:

    Code:
    // create namespace
    Ext.namespace('digitalAsset.app');
    
    
    digitalAsset.app = function() 
    {
    	// public space
    	return {
    		init: function() 
    		{
    			Ext.QuickTips.init(); 
    			
    			
    			TreeCreator.init();
    			
    			var myCallback = function() { }
    			
    			
    			// pannello che contiene l'albero delle categorie
    			var slideCategoryPanel = new Ext.Panel({
    			renderTo: 'sta_minchia', 		
    		    	frame: false,
    		    	border: false,
    		    	title: 'Navigazione',
    		    	collapsible: true,
    		    	titleCollapse: true,
    		    	items: new Ext.TabPanel({
    		    		id: 'category-tab-panel',
    					resizeTabs: true,
    					border: false,
    					minTabWidth: 105,
    					activeTab: 0,
    					tabWidth: 110,
    					enableTabScroll: false,
    					height: 270,
    					defaults: {autoScroll: false},
    					cls: 'categoryTabTool',
    					items: [
    						{iconCls: 'nav', title: 'Directory', items: TreeCreator.getTree2()},
    						{iconCls: 'user', title: 'Categoria test', items: TreeCreator.getTree()}
    						//{title: 'Directory', items: new Ext.Button({text: 'Aggiungi categoria', handler: myCallback})}
    					]
    					
    				})
    		    });
    
    		}
    	};
    }();
    Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    38
    Vote Rating
    0
    andrea.chiozzi@metislab.net is on a distinguished road

      0  

    Default


    Please whatever can help!!!!

  3. #3
    Ext User woog's Avatar
    Join Date
    Apr 2008
    Posts
    12
    Vote Rating
    0
    woog is on a distinguished road

      0  

    Default


    i want to help you.

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

      0  

    Default


    You are overnesting. Do not put the TreePanels you create inside another Panel. A TreePanel is already a Panel.

Thread Participants: 2