admin 管理员组文章数量: 1087139
2024年5月10日发(作者：edg电子竞技俱乐部微博)
利用formpanel的form和column属性混合使用来实现横线布局，效果图如下：
var hform = new nel({
items : [{ // 行1
layout : "column", // 从左往右的布局
items : [{
columnWidth : .3, // 该列有整行中所占百分比
layout : "form", // 从上往下的布局
items : [{
}]
columnWidth : .3,
layout : "form",
items : [{
}]
columnWidth : .3,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "名",
width : 120
xtype : "textfield",
fieldLabel : "姓",
width : 120
title : "灵活布局的表单",
width : 650,
autoHeight : true,
frame : true,
renderTo : y(),
layout : "form", // 整个大的表单是form布局
labelWidth : 65,
labelAlign : "right",
}, {
}, {
}]
}]
xtype : "textfield",
fieldLabel : "英文名",
width : 120
}, { // 行2
layout : "column",
items : [{
}]
columnWidth : .46,
layout : "form",
items : [{
}]
columnWidth : .46,
layout : "form",
items : [{
}]
xtype : "textfield",
fieldLabel : "座右铭2",
width : 200
xtype : "textfield",
fieldLabel : "座右铭1",
width : 200
}, {
}, {// 行3
layout : "form",
items : [{
}]
xtype : "textfield",
fieldLabel : "奖励",
width : 500
xtype : "textfield",
fieldLabel : "处罚",
width : 500
}, {
}, {// 行4
layout : "column",
items : [{
layout : "form",
columnWidth : 0.2,
items : [{
xtype : "textfield",
fieldLabel : "电影最爱",
width : 50
版权声明：本文标题：ExtJs中表单formPanel的横向布局 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1715309450a687165.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论