FormPanel就两种布局方式:
form——从上往下
column——从左往右
注意落实到任何一个表单最后总是form布局。
- Ext.onReady(function(){
- //行1
- var row1 = {
- layout:'column', //从左往右布局
- items:[{
- columnWidth:.3, //该列有整行中所占百分比
- layout:'form', //从上往下布局
- items:[{
- xtype:'textfield',
- fieldLabel:'姓',
- width:120
- }]
- },{
- columnWidth:.3,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'名',
- width:120
- }]
- },{
- columnWidth:.3,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'英文名',
- width:120
- }]
- }]
- };
- //行2
- var row2 = {
- layout:'column',
- items:[{
- columnWidth:.5,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'座右铭1',
- width:220
- }]
- },{
- columnWidth:.5,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'座右铭2',
- width:220
- }]
- }]
- };
- //行3
- var row3 = {
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'奖励',
- width:500
- },{
- xtype:'textfield',
- fieldLabel:'处罚',
- width:500
- }]
- };
- //行4
- var row4 = {
- layout:'column',
- items:[{
- columnWidth:.2,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'最爱电影',
- width:50
- }]
- },{
- columnWidth:.2,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'最爱音乐',
- width:50
- }]
- },{
- columnWidth:.2,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'最爱明星',
- width:50
- }]
- },{
- columnWidth:.2,
- layout:'form',
- items:[{
- xtype:'textfield',
- fieldLabel:'最爱运动',
- width:50
- }]
- }]
- };
- //行5
- var row5 = {
- layout:'form',
- items:[{
- xtype:'htmleditor',
- fieldLabel:'获奖文章',
- height:150
- }]
- };
- //form
- var form = new Ext.form.FormPanel({
- renderTo:Ext.getBody(),
- title:'灵活的表单布局',
- width:650,
- autoHeight:true,
- frame:true,
- layout:'form',
- labelWidth:65,
- labelAlign:'right',
- style:'padding:10px',
- items:[row1,row2,row3,row4,row5],
- buttonAlign:'center',
- buttons:[{
- text:'提交'
- },{
- text:'重置'
- }]
- });
- });