简单来说,就是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
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
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
Panel'
}]
}],
renderTo:Ext.getBody()
})
效果如下图:
界面用tabPanel做吧,看起来会舒服些,不那么拥挤