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

]

});