最近做一个东西需要如下效果:
![](https://i-blog.csdnimg.cn/blog_migrate/e3658f5b84dd4c0a16b7bee95e0d588c.gif)
后来根据 殷良胜老大的【经典布局第五篇】稍做了下修改,实现了需要的效果,唯一不同的是我使用了TabPanel,实现方式几乎都是一样的,可能有那么一点小差异,把在实现过程中的一些问题罗列一下,以供以后参考!
具体划分情况:
记录代码:
function formTest()
{
//<s-------------------这一段要放前面,不过可以先不用看!-------------------------------
var L_RowOne=new Ext.Panel({//上左第一行
layout:"column", //采用列布局方式
border:false, //去掉边框
items:[{
layout:'form', //必须要加,不然不显示下面的控件,因为column替换了前面一个FORM,这里的再给它加上
columnWidth:.5, //上左宽度的一半
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form', //第二列依然
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
var L_RowTwo=new Ext.Panel({//上左第二行
layout:"column",
border:false,
items:[{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
var L_RowThree=new Ext.Panel({//上左第三行
layout:"column",
border:false,
items:[{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
var L_RowFour=new Ext.Panel({//上左第四行
layout:"column",
border:false,
items:[{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"用户名"
}]
},
{
layout:'form',
columnWidth:.5,
border:false,
defaultType: 'textfield',
items:[{
fieldLabel:"密码"
}]
}]
})
//<------------------这一段要放前面,不过可以先不用看!-----------------------------e>
这一段确实有点苦恼,要是你有10行就得加入10个Panel,要是你有N行就得加入N个,如果能够通过配置生成那该多好啊 ,不过,现在也只能想想,能实现的配置也不怎么智能,那就还是有时间再看吧!
var LeftPnl=new Ext.Panel({//左边N列
layout:"form",//这里要为form
columnWidth:.6,
// labelPad:0,
style:'height:105px',
labelWidth:80,
border:false,
items:[
L_RowOne, //添加上面的行
L_RowTwo,
L_RowThree,
L_RowFour
// {
// border:false,
// fieldLabel:"密码"
// }
]
})
var RightPnl=new Ext.Panel({//上右,没问题很简单
layout:"form",
columnWidth:.4,
defaultType: 'textarea', //暂时使用它来顶替下
style:'height:105px',
//labelPad:0,//label与输入控件的距离
border:false,
labelWidth:80,
items:[{
fieldLabel:"图片",
style:'with:120px;height:95px'
}]
})
var pnl=new Ext.Panel({//整个上边pnl
layout:"column",//分为上左上右两块
border:false,
items:[LeftPnl,RightPnl]
})
var Bottom=new Ext.Panel(//下边块,再次感叹,要是能配置那是多么爽的事情啊!哈哈!
{
layout:'column',
// defaultType: 'textfield',
//isFormField:true,
border:false,
items:[
{
layout:'form',
columnWidth:.3,
border:false,
items:[{
fieldLabel:'测试1',xtype:'field'
}]
},
{
layout:'form',
columnWidth:.3,
border:false,
items:[{
xtype:'field',
fieldLabel:'测试2'}]
},
{
layout:'form',
columnWidth:.3,
border:false,
items:[{
xtype:'field',
fieldLabel:'测试3'}]
}
]
}
)
var frm=new Ext.FormPanel({//主体了
labelWidth:80,
//labelPad:0,
renderTo:Ext.getBody(),
items:[{
xtype:'tabpanel',
defaults:{autoHeight:true,bodyStyle:'padding:10px'},
// deferredRender :true,
layoutOnTabChange :true, //这个是必须加的,不然点击PANeL后是没有反应的
//defaultType: 'textfield',
activeTab: 0,
items:[
{title:'pnll1'},
{title:'pnll2',layout:'form',items:[pnl,Bottom]} //同时加载上下两部分,
//isFormField:true,这个东西我用起来有问题
]
}
]
})
}
Ext.onReady(function(){
formTest();
});
总结:Ext的布局方式还是比较灵活的,table布局方式还没有试过,虽然我这个写的代码有点多,方法比较原始,不过呢,能满足需求就先用吧,如果有什么好的方法再改进,至于往深层次考虑,那就只能自己再花些时间了!哈哈!