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

期望给出主要代码,Extjs MVC 跪求~~ 谢谢!
2025-05-13 21:35:41
推荐回答(2个)
回答(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
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()
    })

效果如下图:

回答(2):

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