1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    56
    Vote Rating
    0
    wavel is on a distinguished road

      0  

    Question treepanel in borderlayout problem

    treepanel in borderlayout problem


    Hi,

    I am trying to display treePanel in west region of border layout from last 5 hours but the problem is nothing is displayed in west region and interestingly no error in firebug.
    Can u please tell me can I have treepanel as a region(I think we can as it is a panel)
    if so What is wrong with the code below:-

    Copy the code in a file say 1.html and paste 1.html in ext-2.1\ext-2.1\examples\layout folder of ext download.
    Code:
     <html>
    <head>
      <title>Complex Layout</title>
    	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />    
        <!-- GC -->
     	<!-- LIBS -->
     	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>	<!-- ENDLIBS -->
        <script type="text/javascript" src="../../ext-all.js"></script>
        <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
    	<style type="text/css">
    	html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }	
        </style>
    	<script type="text/javascript">
        Ext.onReady(function(){
    		var treePanel = createTreePanel("treePanel1" , "west");
    		//alert("treePanel.isVisible() ="+treePanel.isVisible());
    		var viewport = new Ext.Viewport({
                layout:'border',
                items:[treePanel ,{
    					region:'center',
    					contentEl:'center2',
    					autoScroll:true
    				 },
    				 {
    					region:'north',
    					contentEl:'north',
    					height:100,
    					autoScroll:true
    				 }
                 ]
            });
    	
        });
    
    		function createTreePanel(el , region){			
    			var treePanel = new Ext.tree.TreePanel({
    				region:region,
    				width:250,
    				el:el,
    				animate:true,				
    				autoScroll:true,
    				enableDD:false,
    				containerScroll: true
                });
                var rootNodeObj = new Object();
    			rootNodeObj.text = 'Root';
    			rootNodeObj.id = 'Root_id';
    			rootNodeObj.allowChildren = true;
                var root = new Ext.tree.TreeNode(rootNodeObj);
                treePanel.setRootNode(root);            
                // render the tree
                treePanel.render();
    			 node1 = new Ext.tree.TreeNode({
    				text: 'node1 title',
    				id:  'node1_id',
    				cls: 'some_class',
    				allowChildren: true
    			});
    			childnode1 = new Ext.tree.TreeNode({
    				text: 'node2 title',
    				id:  'node2_id',
    				cls: 'some_class',
    				allowChildren: false
    			});
    			node1.appendChild(childnode1);
    			root.appendChild(node1);
    			root.expand(false);
                return treePanel;
    		}
    	</script>
    </head>
    <body>
       <div id="treePanel1">	
    	</div> 
    
      <div id="center2">
               center region
      </div>
    	<div id="north">
    	</div>
     </body>
    </html>
    Thanks.
    with regards

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    1
    devnull is an unknown quantity at this point

      0  

    Default


    dont use the private property 'el'. in fact, why are you even using any html at all? viewport can create the entire layout without the need of any divs in the html.

Thread Participants: 1