ExtJs——FormPanel（布局）！！！

FormPanel就两种布局方式：

form——从上往下

column——从左往右

注意落实到任何一个表单最后总是form布局。

 Ext.onReady(function(){
 //行1
 varrow1={
 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
 varrow2={
 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
 varrow3={
 layout:'form',
 items:[{
 xtype:'textfield',
 fieldLabel:'奖励',
 width:500
 },{
 xtype:'textfield',
 fieldLabel:'处罚',
 width:500
 }]
 };
 //行4
 varrow4={
 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
 varrow5={
 layout:'form',
 items:[{
 xtype:'htmleditor',
 fieldLabel:'获奖文章',
 height:150
 }]
 };
 //form
 varform=newExt.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:'重置'
 }]
 });
 });