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:'重置'
}]
});
});