【技能】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'，来控制关闭右侧的面板。

实现效果：