Question

如何用Extjs进行下面的布局，整体是个panel 内部3个子panel 并且还可以拆分成2部分（如图）

期望给出主要代码，Extjs MVC 跪求~~ 谢谢！

Answer 1

简单来说，就是hbox或column横向布局，再用vbox纵向布局

代码如下：

Ext.onReady(function () {
		
    Ext.create('Ext.panel.Panel',{
		
	layout:{
	    type:'column'
	},
	default:{
	    xtype:'panel'
	},
	border:1,
	width:600,
	height:400,
	padding:10,
	items:[{
	    margin:'30px',
	    width:150,
	    height:290,
	    layout:'vbox',
	    items:[{
	        width:150,
		height:90,
		html:'form'
	    },{
	        width:150,
		height:200,
		html:'grid<br>Panel'
	    }]
	},{
	    margin:'30px 30px 30px 0',
	    width:150,
	    height:290,
	    layout:'vbox',
	    items:[{
		width:150,
		height:90,
		html:'form'
	    },{
		width:150,
		height:200,
		html:'grid<br>Panel'
	    }]
	},{	
	    margin:'30px 30px 30px 0',
	    width:150,
	    height:290,
	    layout:'vbox',
	    items:[{
	        width:150,
		height:90,
		html:'form'
	    },{
		width:150,
		height:200,
		html:'grid<br>Panel'
	    }]
	}],
	renderTo:Ext.getBody()
    })

效果如下图：

Answer 2

界面用tabPanel做吧，看起来会舒服些，不那么拥挤