利用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 : [{ // 行1
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
layout : "column",
items : [{
columnWidth : .46,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "座右铭1",
width : 200
}]
}, {
columnWidth : .46,
layout : "form",
items : [{
xtype : "textfield",
fieldLabel : "座右铭2",
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
}]
}, {
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 : "重置"
}]
});
- 大小: 3.7 KB
分享到:
相关推荐
ExtJs中表单formPanel的横向布局
Ext的FormPanel组件说明formPanel的详细使用说明
Ext table布局实例 formpanel的table布局
代码如下:Ext.onReady(function(){ Ext.QuickTips.init(); //第一句的目的是为需要的元件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息了。 Ext.form.Field.prototype.msgTarget = ‘under’; //第...
NULL 博文链接:https://627443183-qq-com.iteye.com/blog/1725391
.archExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇).doc
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别小结,需要的朋友可以参考下。
本篇是关于Ext.Ajax + Ext.FormPanel + MySQL数据库的完整登录案例,一个是html的form表单,一个是Ext的FormPanel表单,在提交或结合Ext.Ajax多少还是有区别的.
8.1.2 在FormPanel中使用HBoxLayout和VBoxLayout进行布局 219 8.1.3 Panel的body的样式范围 224 8.2 Form表单组件 226 8.2.1 DisplayField控件 226 8.2.2 在FormPanel中使用TabPanel 229 8.2.3 DirectLoad与...
Ext教程 展示EXT表单FormPanel和表格GridPanel的使用
NULL 博文链接:https://zxf-noimp.iteye.com/blog/634692
4. ExtJs2.0学习系列(4)--Ext.FormPanel之第一式 5. ExtJs2.0学习系列(5)--Ext.FormPanel之第二式 6. ExtJs2.0学习系列(6)--Ext.FormPanel之第三式(ComboBox篇) 7. ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他...
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件
var tab2 = new Ext.FormPanel({ labelAlign: 'top', title: 'Inner Tabs', bodyStyle:'padding:5px', width: 1000, items: [{ layout:'column', border:false, items:[{ columnWidth:.5, layout: 'form'...
自我扩展FormPanel 和Store实现自动数据触发感知功能实现与store绑定功能
Ext智能提示 - Spket(Dreamweaver插件) 里面有安装说明