39、EXT 做布局设置region
用EXTJS设置界面布局时有时候需要做一些较复杂的布局，同时要求布局中的各个部分能够自适应高度和宽度。
最近在公司做了一个项目，用EXT实现portal功能，用户界面要求能够自定义。其中就涉及了一些比较复杂的布局，现做总结如下（Ext 的版本是3.0）：
1、使用了border布局panel1中如果嵌套另一个border布局的panel2，且panel2中设置了'autoHeight:true'，那么panel2会显示不出来，我没找出解决办法，如果有哪位高人知道，请贴出来，大家分享。
2、界面布局能随浏览器窗口的大小自动伸缩。这个最简单的做法就是将页面上的内容全部放到一个ViewPoint中。Ext.ViewPoint，这个东西是自动填充整个body区域。
new Ext.Viewport({
items:[mianPanel]
});
3、宽度自适应
以form布局的panel中的组件，只有设置了anchor属性时，该组件的宽度才能随着panel的宽度改变而改变。比如anchor: '100%' // anchor width by percentage
4、高度自适应与滚动条的控制
panel中控制高度的属性为
height:只能是数字或‘auto’，不能设置百分比
autoHeight:默认为false
控制滚动条的属性是
autoScroll:如果内容过多，是否自动出现滚动条。默认为true;
注意：
1、如果height:300和autoHeight:true同时存在，则height：300无效。
2、如果有autoHeight:true，则panel中的滚动条就不会出现。
Anchor布局
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout:'anchor',
anchorSize: {width:800, height:600},
items:[{
title:'Item 1',
html:'Content 1',
anchor:'right 20%',
html: "宽度=容器宽度*100%,高度=容器*20%"
},{
title:'Item 2',
html:'Content 2',
anchor:'80% 30%',
html: "宽度=容器宽度*80%,高度=容器*30%"
},{
title:'Item 3',
html:'Content 3',
anchor:'-400 50%',
html: "宽度=容器宽度-400,高度=容器*50%"
}]
});
});
布局设置的方式如下：（最开始都是用的Ext.ux.Portal，容器中的每个组件都可以自由拖动。但是后来客户说如果页面上的组件可以自由拖拽的话，就要能够保存（即个性化页面），不然干脆就不可以拖拽。考虑还是不可以退拽来的简单，就都改成panel啦）
var rightPanel=new Ext.Panel({
id:'rightPanel',
region:"east",
split:true,
autoHeight:true,
border: false,
collapsible: true,
collapseMode:'mini',
frame:false,
width:300,
items: [{
columnWidth:1,
id:'rightPotalPanel',
border: false,
style:'padding:0px 0px 0px 0px',
items:[]
}],
margins:'0 0 0 0'
});
var leftPanel=new Ext.Panel({
//var leftPanel=new Ext.ux.Portal({
id:'leftPanel',
region:"center",
autoHeight:true,
frame:false,
border:false,
items: []
});
var centerPanel=new Ext.ux.Portal({
anchor: '100%',
region:"center",
id:'centerPanel',
iconCls: 'einfoIco',
autoHeight:true,
margins:'0 0 0 0',
style:'padding:0px 0px 0px 0px',
frame:false,
border:false,
items:[{
columnWidth:.5,
id:'centerPanel_c_l',
style:'padding:0px 0px 0px 0px',
items:[]
},{
columnWidth:.5,
id:'centerPanel_c_r',
style:'padding:0px 0px 0px 5px',
items:[]
}
]
});
var center_topPanel=new Ext.Panel({
anchor: '100%',
id:'center_topPanel',
region:'north',
layout:'fit',
style:'padding:0px 0px 10px 0px',
height:300,
border:false,
split:false,
items:[]
});
var centerFramePanel=new Ext.Panel({
region:"center",
id:'centerRegion',
split:true,
margins:'0 0 0 0',
style:'padding:0px 0px 0px 0px',
layout:'form',
autoHeight:true,
border:false,
items:[
center_t,
centerPanel
]
});
var mainPanel=new Ext.Panel({
region:'center',
border:false,
autoScroll:true,
layout:'border',
items:[
leftPanel,
rightPanel,
centerFramePanel
]
});
var viewport = new Ext.Viewport({
id:'homeview',
layout:"fit",
items:
[
mainPanel
]
});