<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext/resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS --> <script type="text/javascript" src="http://www.cnblogs.com/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext/adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="http://www.cnblogs.com/ext/ext-all.js"></script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
#header{
background: url(images/header-bar.gif) repeat-x bottom;
border-bottom: 1px solid #083772;
padding:5px 4px;
}
#footer{
background: url(images/header-bar.gif) repeat-x bottom;
border-top: 1px solid #083772;
padding:2px 4px;
color:white;
font:normal 8pt arial,helvetica;
}
#nav {
}
#nav, #inner1, #inner2 {
padding:10px;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.x-layout-panel-north, .x-layout-panel-south, #content .x-layout-panel-center{
border:0px none;
}
#content .x-layout-panel-south{
border-top:1px solid #aca899;
}
#content .x-layout-panel-center{
border-bottom:1px solid #aca899;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
west: {
split:true,
initialSize: 200,
titlebar: true,//是否允许有标题栏,true为有，false为没有
collapsible: true,
minSize: 100,
maxSize: 400
},
center: {
tabPosition: 'top',
alwaysShowTabs: true,
autoScroll: true,
titlebar:true //是否允许有标题栏,true为有，false为没有
}
});
layout.beginUpdate();
layout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body class="ytheme-gray">
<script type="text/javascript" src="../examples.js"></script>
<div id ="container">
<div id="nav" class="x-layout-inactive-content">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="content" class="x-layout-inactive-content"></div>
<div id="south" class="x-layout-inactive-content"></div>
<div id="inner1" class="x-layout-inactive-content">
</div>
<div id="inner2" class="x-layout-inactive-content">
</div>
</div>
</body>
</html>
