用EXTJS设置界面布局时有时候需要做一些较复杂的布局，同时要求布局中的各个部分能够自适应高度和宽度。

用EXTJS设置界面布局时有时候需要做一些较复杂的布局，同时要求布局中的各个部分能够自适应高度和宽度。

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
]
});