PDA

View Full Version : Changes in BorderLayout with NestedLayoutPanel?



kjordan
19 Feb 2007, 2:34 PM
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:

<!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:

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.

tryanDLS
19 Feb 2007, 3:34 PM
You have an awful lot of includes - can you strip that down to the base alpha includes and retest.

kjordan
19 Feb 2007, 3:39 PM
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.

tryanDLS
19 Feb 2007, 3:44 PM
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.

jack.slocum
19 Feb 2007, 8:31 PM
ylayout-inactive-content = x-layout-inactive-content