1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    Default Changes in BorderLayout with NestedLayoutPanel?

    Changes in BorderLayout with NestedLayoutPanel?


    I've got a fairly simple page with a NestedLayoutPanel in a Borderlayout center region. But for some reason the NestedLayoutPanel doesn't show up even though it does modify my DOM.
    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>XTEC Mail</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    		
    		
    		<link rel="stylesheet" href="/system/js/yui-testing/build/fonts/fonts.css" media="screen" />
    		<link rel="stylesheet" type="text/css" href="/system/js/yui-ext-svn/resources/css/layout.css" media="screen" />
    		<link rel="stylesheet" type="text/css" href="/system/js/yui-ext-svn/resources/css/tabs.css" media="screen" />
    		<link rel="stylesheet" href="/system/js/yui-testing/resources/css/layout.css" media="screen" />
    		<link rel="stylesheet" href="/rma/css/template.css" type="text/css" media="screen" />
    		<link rel="stylesheet" href="/rma/css/rma.css" type="text/css" media="screen" />
    		<link rel="stylesheet" href="/system/css/system.css" type="text/css" media="screen" />
    		<script type="text/javascript" src="/system/js/yui-testing/build/yahoo/yahoo-debug.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/dom/dom-min.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/event/event-min.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/connection/connection-min.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/animation/animation-min.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/autocomplete/autocomplete-min.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/dragdrop/dragdrop.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/slider/slider.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/examples/autocomplete/js/json.js"></script>
    		<script type="text/javascript" src="/system/js/yui-testing/build/container/container.js"></script>
    		<script type="text/javascript" src="/system/js/ext-1.0-alpha1/ext-all.js"></script>
    		<link rel="stylesheet" type="text/css" media="screen" href="/system/js/ext-1.0-alpha1/resources/css/ext-all.css" />
    		<script type="text/javascript" src="layout.js"></script>
    		<script type="text/javascript" src="mail.js"></script>
    		<style type="text/css">
    			a { text-decoration:none; color:#6A7981; }
    			a:hover { text-decoration:underline; color:#000; }
    			.ytoolbar .test {
    				width:auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div id ="container">
    		  <div id="folders" class="ylayout-inactive-content">
    		  	<div id="foldertree"></div>
    		  </div>
    		  <div id="content" class="ylayout-inactive-content"></div>
    	  	  <div id="mailgrid" style="height: 350px"></div>
    		  <div id="messagebody" class="ylayout-inactive-content">
    		  	<div id="attachmentbar"></div>
    			<div id="messagecontent"></div>
    		  </div>
    		</div>
    	</body>
    </html>
    Layout code, initiated onDocumentReady:
    Code:
    var mailLayout = {
            init : function(){
               this.layout = new Ext.BorderLayout(document.body, {
                    west: {
                        split:true,
                        initialSize: 200,
                        titlebar: true,
                        collapsible: true,
                        minSize: 100,
                        maxSize: 400
                    },
                    center: {
                        autoScroll: false
                    }
                });
    			this.innerLayout = new Ext.BorderLayout('content', {
                    south: {
                        split:true,
                        initialSize: 200,
                        minSize: 100,
                        maxSize: 400,
                        autoScroll:true,
                        collapsible:true,
                        titlebar: true
                    },
                    center: {
                        autoScroll:true,
                        titlebar: true
                    }
                });
    			this.south = new Ext.ContentPanel('messagebody', {title:"Message"});
    			this.center = new Ext.GridPanel(Grid1.grid, {title: 'INBOX',closable:false})
    			this.innerLayout.beginUpdate();
                this.innerLayout.add('south', this.south);
                this.innerLayout.add('center', this.center);
    			this.innerLayout.endUpdate();
                this.layout.beginUpdate();
                this.layout.add('west', new Ext.ContentPanel('folders', {title: 'Folders', fitToFrame:true, closable:false}));
    
    //			this.attachmentbar = new Ext.Toolbar('attachmentbar');
                this.layout.add('center',new Ext.NestedLayoutPanel(this.innerLayout,{fitToFrame:true,title:"Inner Layout"}));
                this.layout.endUpdate();
    			//this.innerLayout.on('regionresized',function(region,newSize) {  });
    			//getmailboxes();
           }
    
    };
    The grid is the same one in my post about JSONDataModel which works if I make the center region just a GridPanel. I have tried moving stuff around just to see if it's an ordering thing and it did work in the previous version.

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    You have an awful lot of includes - can you strip that down to the base alpha includes and retest.

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Posts
    125
    Vote Rating
    0
    kjordan is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    You have an awful lot of includes - can you strip that down to the base alpha includes and retest.
    Hmm, guess I missed some of the CSS includes at the top. I'm not sure which yui includes I still need though, but the only Ext includes I have are ext-all.js and ext-all.css.

    Well, I'm not sure what it was, but I removed the yui stuff from my includes and used the version included with Ext and it worked.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    The only yui file you need is the yui-utilities.js file from the alpha pkg, unless you're still using other yui functionality that's not included in that file. I also don't see the ext-bridge-yui.js file.

  5. #5
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    ylayout-inactive-content = x-layout-inactive-content

Similar Threads

  1. Using Toolbar in NestedLayoutPanel...
    By davy_wei in forum Ext 1.x: Bugs
    Replies: 1
    Last Post: 27 Jun 2007, 11:40 PM
  2. Have problem with NestedLayoutPanel
    By andrey.korolyov in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 26 Mar 2007, 5:13 AM
  3. NestedLayoutPanel
    By gedw99 in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 22 Mar 2007, 3:37 AM
  4. BorderLayout: Change ContentPanel to NestedLayoutPanel?
    By fast40x in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 7 Mar 2007, 12:08 PM
  5. BorderLayout - NestedLayoutPanel getting resized on collapse
    By jarrednicholls in forum Ext 1.x: Bugs
    Replies: 14
    Last Post: 28 Dec 2006, 7:00 AM

Thread Participants: 2