EXT的formpanel中的橫向排列布局

?利用formpanel的form和column屬性混合使用來實現橫線布局，效果圖如下：

?

?

?

var hform = new Ext.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", // 從上往下的布局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",items : [{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 : [{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 : [{xtype : "textfield",fieldLabel : "明星最愛",width : 50}]}, {layout : "form",columnWidth : 0.2,items : [{xtype : "textfield",fieldLabel : "運動最愛",width : 50}]}]}],buttonAlign : "center",buttons : [{text : "提交"}, {text : "重置"}] });

轉載于:https://www.cnblogs.com/sisi-five/p/3994302.html

總結

以上是生活随笔為你收集整理的EXT 中form的列横向排列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。