extjs中表单formpanel的横向布局

《extjs中表单formpanel的横向布局》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、利用formpanel的form和column属性混合使用来实现横线布局，效果图如下：varhform=newExt.form.FormPanel({title:"灵活布局的表单",width:650,autoHeight:true,frame:true,renderTo:Ext.getBody(),layout:"form",//整个大的表单是form布局labelWidth:65,labelAlign:"right",items:[{//行1layout:"column",//从左往右的布局items:[{columnWidth:.3,//该列有整行中所占百分比layout:"form

2、",//从上往下的布局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}]}]},{//行2layout:"column",items:[{columnWidth:.46,layout:"form",it

3、ems:[{xtype:"textfield",fieldLabel:"座右铭1",width:200}]},{columnWidth:.46,layout:"form",items:[{xtype:"textfield",fieldLabel:"座右铭2",width:200}]}]},{//行3layout:"form",items:[{xtype:"textfield",fieldLabel:"奖励",width:500},{xtype:"textfield",fieldLabel:"处罚",width:500}]},{//行4layout:"column",items:[{layo

4、ut:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"电影最爱",width:50}]},{layout:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"音乐最爱",width:50}]},{layout:"form",columnWidth:0.2,items:[{xtype:"textfield",fieldLabel:"明星最爱",width:50}]},{layout:"form",columnWidth:0.2,items:[{xty

5、pe:"textfield",fieldLabel:"运动最爱",width:50}]}]}],buttonAlign:"center",buttons:[{text:"提交"},{text:"重置"}]});