【技能】Ext.Viewport 实现左三右一排列方式。
1、Extjs 布局很是灵活，但是吐槽下CSS，太难重写，想自己重构一套都难哎...
var viewport = new Ext.Viewport({
layout:'border',
items:[
{
//中间部分
region:'center',
id: 'centerPanel',
iconCls:'',
title:'${centerTitle}',
autoScroll:false,
header:false,
layout: 'fit',
items:[mainTabs]},
{
//布局左边west部分
region : 'west',
width:220,
collapsible: true,
split:true,
header:false,
border:false,
frame:false,
xtype:'panel',
layout:'anchor',
collapseMode:'mini',
layoutConfig:{columns:1},
items:[{
split:true,
region:'west',
header:false,
autoScroll:false,
border:false,
anchor:'100% 10%',
xtype: 'panel',
html:'<table border="0" cellpadding="0" cellspacing="0" width="100%" height="60" background="./resource/image/banner_background/${theme}.png"> <tr > <td style="padding-left:15px;padding-top:10px"><img class="IEPNG" src="${banner}" /> </td> </tr></table>',
collapsible: true
},{region:'west',
width: 220,
anchor:'100% 84%',
collapsible: true,
minSize: 200,
border:false,
maxSize: 350,
split: true,
collapseMode:'mini',
iconCls:'book_previousIcon',
title: '${westTitle}',
layout:'accordion',
layoutConfig:{
animate:true,
activeOnTop : ${activeOnTop}
},
items: [
#foreach($card in $cardList)
{
autoScroll:true,
border:false,
contentEl: 'div.card.${card.menuid}',
#if(${card.iconcls}&&${card.iconcls}!="")
iconCls:'${card.iconcls}',
#end
title:'${card.menuname}'
}
#if(${card.isNotLast})
,
#end
#end
]
},{
split:true,
region:'west',
collapsible: true,
header:false,
autoScroll:false,
//border:false,
anchor:'100% 6%',
region:'center',
layout: {
type:'hbox',
padding:'3 3 3 3',
pack:'start',
align:'top'
},
defaults:{margins:'0 5 0 0'},
xtype: 'panel',
items:[configButton,closeButton]
}]
}
]});
说明
1.Viewport一个panel 来固定region:'center', 也就是center部分
2.再使用一个panel，使用layout:'anchor',布局方式，anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
3.新增第二部的panel，添加3个子panel布局，并且配置它们的anchor，来填充父容器，保证改变3个中得一个，其他2个能自动填充空间，进行自动适应。
4.这里提示一点：由于是使用4个panel 组装成的区域，可以使用collapseMode:'mini'，来控制关闭右侧的面板。
实现效果：