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.
Changes in BorderLayout with NestedLayoutPanel?
Originally Posted by tryanDLS
Reply With Quote
