就是一个主页面框架为border布局,为north,west,center,其中在center面板中嵌套一个“田”字布局，这个“田”字布局要自适应充满center面板我尝试了一种方式，是在center面板中先加入一个column布局的面板，其中属性为2列，再在这两列的面板分别加入anchor布局的面板，测试打开页面能出现“田”字自适应的效果，不过在页面改变大小后虽然“田”字随着变，但是却不对称，如何使“田”字既能自适应又能保持对称的效果呢？
下面是我在示例布局文件中做了一些修改，代码如下：文件路径为ext-3.2.1\examples\layout\
<html>
<head>
<title>Column Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../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%;
}
.x-panel-body p {
margin:5px;
}
.x-column-layout-ct .x-panel {
margin-bottom:5px;
}
.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png) !important;
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png) !important;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var anchor1_panel=new Ext.Panel({
layout:'anchor',
items:[{
title:'Item 1',
html:'Content 1',
anchor:'100% 50%'
},{
title:'Item 3',
html:'Content 3',
anchor:'100% 50%'
}]
});
var anchor2_panel=new Ext.Panel({
layout:'anchor',
items:[{
title:'Item 2',
html:'Content 2',
anchor:'100% 50%'
},{
title:'Item 4',
html:'Content 4',
anchor:'100% 50%'
}]
});
var column1_panel=new Ext.Panel({
layout:'column',
items:[{
columnWidth:.5,
id:'column1',
baseCls:'x-plain',
bodyStyle:'padding:1px 0 1px 1px',
items:[anchor1_panel]
},{
columnWidth:.5,
baseCls:'x-plain',
bodyStyle:'padding:1px 0 1px 1px',
items:[anchor2_panel]
}]
});
var north_panel=new Ext.Panel({
region:'north',
id:'north-panel',
title:"North",
height:100
});
var west_panel=new Ext.Panel({
region:'west',
id:'west-panel',
title:"West",
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
});
var center_panel=new Ext.Panel({
region:'center',
id:'center-panel',
title:"Center",
margins:'0 5 5 0',
listeners :{ bodyresize:function(p,width,height) { anchor1_panel.setHeight(height);anchor2_panel.setHeight(height); } },
items:[column1_panel]
});
var viewport = new Ext.Viewport({
layout:'border',
items:[north_panel,west_panel,center_panel]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
