Ext FormPanel布局 (一行显示两对控件元素)
在作布局的时候,常常会出现这类情况,在HTML中可以利用表格来布局,那么Ext2呢?
我自己也琢磨了不少时间,今天终于有了收获:
var simpleForm = new Ext.FormPanel({
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [{
layout:'column', //定义该元素为布局为列布局方式
border:false,
labelSeparator:':',
items:[{
columnWidth:.5, //该列占用的宽度,标识为50%
layout: 'form',
border:false,
items: [{ //这里可以为多个Item,表现出来是该列的多行
cls : 'key',
xtype:'textfield',
fieldLabel: '用户名',
name: 'name',
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
cls : 'key',
xtype:'textfield',
inputType:'password',
fieldLabel: '口令',
name: 'passwd',
anchor:'90%'
}]
}]
}]
})
labelAlign: 'left',
title: '表单例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [{
layout:'column', //定义该元素为布局为列布局方式
border:false,
labelSeparator:':',
items:[{
columnWidth:.5, //该列占用的宽度,标识为50%
layout: 'form',
border:false,
items: [{ //这里可以为多个Item,表现出来是该列的多行
cls : 'key',
xtype:'textfield',
fieldLabel: '用户名',
name: 'name',
anchor:'90%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
cls : 'key',
xtype:'textfield',
inputType:'password',
fieldLabel: '口令',
name: 'passwd',
anchor:'90%'
}]
}]
}]
})
如果每个列元素中的Items都为一行,则可以通过控制每列显示的宽度来换行,没换所有的列元素的宽度和达到100%后即换行