7.FormPanel
目录
一、FormPanel
二、字段校验
三、TextArea
四、NumberField
五、Checkbox与Radio
六、TriggerField
七、ComboBox
八、TimeField
九、DateField
十、Hidden
十一、FieldSet
十二、vtype
一、FormPanel
示例一：最简单的FormPanel示例。
Ext.onReady(function(){ var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, items:[ new Ext.form.TextField({ fieldLabel:"你的姓名" }) ] }); });
示例二：调整标签样式。
labelSeparator分隔符
labelWidth标签宽度
labelAlign标签对齐方式
Ext.onReady(function(){ var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:100, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel:"你的姓名" }) ] }); });
二、字段校验
示例三：字段校验。
validateOnBlur 是否在失去焦点时进行校验 validationDelay 校验延迟 minLength:最小长度 minLengthText 最小长度显示提示信息 allowBlank是否允许为空 blankText/为空之后的提示信息 msgTarget提示信息显示方式。 msgTarget :'qtip'//显示一个浮动的提示信息。 msgTarget :'title'//显示一个浏览器原始的浮动提示信息。 msgTarget :'under'//在字段下方显示一个提示信息。 msgTarget :'side'//在字段的右边显示一个提示信息。
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:100, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel:"你的姓名", validateOnBlur:true, validationDelay:2000, minLength:2, minLengthText:"请输入长度为2以上的姓名", allowBlank:false, blankText:"名字不能为空", msgTarget :'qtip' }), new Ext.form.NumberField({ fieldLabel:"你的年龄", validateOnBlur:true, validationDelay:2000, maxLength:3, maxLengthText:"请输入正确的年龄", allowBlank:false, blankText:"年龄不能为空", msgTarget :'qtip' }) ] }); });
示例四：用户登陆页面
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:100, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel : '用户名', id : 'userName', selectOnFocus : true, allowBlank : false, //验证电子邮件格式的正则表达式 regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/, regexText:'用户名格式错误' }), new Ext.form.TextField({ id : 'password', fieldLabel : '密码', inputType : 'password', allowBlank : false, blankText:"密码不能为空" }) ], buttons:[ {text:"登陆",handler:function() { Ext.MessageBox.alert("登陆成功","用户名" + form.findById("userName").getValue() + ",密码" + form.findById("password").getValue()); } } ] }); });
三、TextArea
示例五：TextArea示例。
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, labelAlign:"right", items:[ new Ext.form.TextArea({ id:'memo', width:250, height:300, fieldLabel: '备注' }) ], buttons:[ {text:"提交",handler:function() { Ext.MessageBox.alert("备注信息" + form.findById("memo").getValue()); } } ] }); });
四、NumberField
示例六：NumberField数字字段示例
NumberField数字字段
整数限制 allowDecimals : false,//不允许输入小数 allowNegative : false,//不允许输入负数 nanText :'请输入有效的整数',//无效数字提示 allowNegative :false//不允许输入负数 小数限制。 decimalPrecision : 2,//精确到小数点后两位 allowDecimals : true,//允许输入小数 nanText :'请输入有效的小数',//无效数字提示 allowNegative :false//允许输入负数 数字范围限制 baseChars :'12345'//输入数字范围 数值范围限制 maxValue : 100,//最大值 minValue : 50//最小值
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:70, labelAlign:"right", items:[ new Ext.form.NumberField({ fieldLabel:'整数', allowDecimals : false,//不允许输入小数 allowNegative : false,//不允许输入负数 nanText :'请输入有效的整数',//无效数字提示 allowNegative :false//不允许输入负数 }), new Ext.form.NumberField({ fieldLabel:'小数', decimalPrecision : 2,//精确到小数点后两位 allowDecimals : true,//允许输入小数 nanText :'请输入有效的小数',//无效数字提示 allowNegative :false//允许输入负数 }), new Ext.form.NumberField({ fieldLabel:'数字限制', baseChars :'12345'//输入数字范围 }), new Ext.form.NumberField({ fieldLabel:'数值限制', maxValue : 100,//最大值 minValue : 50,//最小值 maxText:"最大数为100", minText:"最小数为50" }) ] }); });
五、Checkbox与Radio
示例七：Ext.form.Checkbox和Ext.form.Radio
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, labelAlign:"right", items:[ new Ext.form.Radio({ name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '男' }), new Ext.form.Radio({ name : 'sex',//名字相同的单选框会作为一组 fieldLabel:'性别', boxLabel : '女' }), new Ext.form.Checkbox({ name : 'swim', fieldLabel:'爱好', boxLabel : '游泳' }), new Ext.form.Checkbox({ name : 'walk', fieldLabel:'爱好', boxLabel : '散步' }) ] }); });
示例八：横排显示Ext.form.Checkbox和Ext.form.Radio
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ { layout:"column", width:150, items:[ new Ext.form.Label({ text:"性别：" }), new Ext.form.Radio({ columnWidth:.5, name : 'sex',//名字相同的单选框会作为一组 boxLabel : '男' }), new Ext.form.Radio({ columnWidth:.5, name : 'sex',//名字相同的单选框会作为一组 boxLabel : '女' }) ] }, { layout:"column", width:150, items:[ new Ext.form.Label({ text:"爱好：" }), new Ext.form.Checkbox({ columnWidth:.5, name : 'swim', boxLabel : '游泳' }), new Ext.form.Checkbox({ columnWidth:.5, name : 'walk', boxLabel : '散步' }) ] } ] }); });
六、TriggerField
示例九：TriggerField示例
TriggerField
说明：它提供了一个触发的事件onTriggerClick，datefield和combox都是继承它
Ext.onReady(function(){ Ext.QuickTips.init(); var form = new Ext.form.FormPanel({ renderTo:"hello", title:"表单Panel", frame : true, width:300, height:300, labelSeparator :'：',//分隔符 labelWidth : 80,//标签宽度 items:[ new Ext.form.TriggerField({ id:"city", fieldLabel:"城市", onTriggerClick:function() { var city = form.findById("city"); } }) ] }); });
七、ComboBox
示例十：ComboBox示例
Ext.onReady(function(){ Ext.QuickTips.init(); var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["上海","shanghai"], ["广州","guangzhou"] ] }); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"local" }) ] }); });
示例十一：ComboBox中获得value值。
forceSelection : true, 要求输入值必须在列表中存在 resizable : true, 允许改变下拉列表的大小 typeAhead : true, 允许自动选择匹配的剩余部分文本 value:'beijing', 默认选择北京 emptyText:'请选择一个城市//为空时显示文本
Ext.onReady(function(){ Ext.QuickTips.init(); var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["上海","shanghai"], ["广州","guangzhou"] ] }); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"local", forceSelection : true,//要求输入值必须在列表中存在 resizable : true, typeAhead : true, emptyText:'请选择一个城市...', listeners:{ "select":function() { Ext.MessageBox.alert("城市","选择的城市是" + Ext.get("city").dom.value); } } }) ] }); });
示例十二：ComboBox中显示远程数据。
Ext.onReady(function(){ Ext.QuickTips.init(); var store = new Ext.data.SimpleStore({ proxy : new Ext.data.HttpProxy({//读取远程数据的代理 url : '../response.jsp'//远s程地址 }), fields:["chinese","english"] }); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", fieldLabel:"城市", triggerAction:"all", store:store, displayField:"chinese", valueField:"english", mode:"remote", forceSelection : true,//要求输入值必须在列表中存在 resizable : true, typeAhead : true, emptyText:'请选择一个城市...', listeners:{ "select":function() { Ext.MessageBox.alert("城市","选择的城市是" + Ext.get("city").dom.value); } } }) ] }); });
<%@ page language="java" contentType="text/html; charset=gb2312" pageEncoding="gb2312"%> <% String citys = "[['北京','beijing'],['上海','shanghai'],['广州','guangzhou']]"; response.getWriter().write(citys); %>
ComboBox组合框。
示例一：显示本地数据。
Ext.onReady(function(){ Ext.QuickTips.init(); var store = new Ext.data.SimpleStore({ fields:["city"], data:[ ["北京"], ["广州"], ["上海"] ] }); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查询所有数据 store:store, displayField:"city", valueField:"city", mode:"local" }) ] }); });
示例二：键值对的设置。
Ext.onReady(function(){ Ext.QuickTips.init(); var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["广州","guangzhou"], ["上海","shanghai"] ] }); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查询所有数据 store:store, displayField:"chinese", valueField:"english", mode:"local" }) ] }); });
示例三：获得value值。
Ext.onReady(function(){ Ext.QuickTips.init(); var store = new Ext.data.SimpleStore({ fields:["chinese","english"], data:[ ["北京","beijing"], ["广州","guangzhou"], ["上海","shanghai"] ] }); var form = new Ext.FormPanel({ renderTo:"hello", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查询所有数据 store:store, displayField:"chinese", valueField:"english", mode:"local", hiddenName:"cityValue", listeners:{ "select":function(){ Ext.MessageBox.alert("城市","你选择的城市是" + Ext.get("cityValue").getValue()) } } }) ] }); });
示例六：ComboBox级联
|
Ext.onReady(function(){ Ext.QuickTips.init();
var store = new Ext.data.SimpleStore({ fields:["chinese","english"], proxy: new Ext.data.HttpProxy({ url:"citySearchServer2.jsp" }) });
var shenfenstore = new Ext.data.SimpleStore({ fields:["chinese","english"], proxy: new Ext.data.HttpProxy({ url:"shengfenSearchServer.jsp" }) })
var shengfen = new Ext.form.ComboBox({ id:"shengfen", fieldLabel:"省份", triggerAction:"all",//查询所有数据 displayField:"chinese", valueField:"english", mode:"remote", hiddenName:"shengfenValue", store:shenfenstore, listeners:{ "select":function(combo, record,index){ city.clearValue(); store.proxy = new Ext.data.HttpProxy({ url:"citySearchServer2.jsp?shengfen=" + Ext.get("shengfenValue").getValue() }); store.load(); } } })
var city = new Ext.form.ComboBox({ id:"city", name:"city", fieldLabel:"城市", triggerAction:"all",//查询所有数据 store:store, displayField:"chinese", valueField:"english", mode:"remote", hiddenName:"cityValue", queryParam:"shengfen",//查询参数 allQuery:"hunan",//查询值 listeners:{ "select":function(){ Ext.MessageBox.alert("城市","你选择的城市是" + Ext.get("cityValue").getValue()) } } })
var form = new Ext.FormPanel({ renderTo:"form", title:"表单Panel", width:300, height:300, frame:true, labelSeparator:":", labelWidth:30, items:[ shengfen,city ] }); }); |
forceSelection : true, 要求输入值必须在列表中存在
resizable : true, 允许改变下拉列表的大小
typeAhead : true, 允许自动选择匹配的剩余部分文本
value:'beijing', 默认选择北京
emptyText:'请选择一个城市//为空时显示文本
转换select组件为Ext.form.ComboBox的示例
|
Ext.onReady(function(){ var form = new Ext.form.FormPanel({ title:'转换select组件为Ext.form.ComboBox的示例', labelSeparator :'：',//分隔符 labelWidth : 80,//标签宽度 bodyStyle:'padding:5 5 5 5',//表单边距 frame : true, height:80, width:270, applyTo :'form', items:[ new Ext.form.ComboBox({ name:'level', fieldLabel:'职称等级', lazyRender : true, triggerAction: 'all',//单击触发按钮显示全部数据 transform : 'levelName' }) ] }) }); |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>TestFormPanel</title> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all-debug.js"></script> <script type="text/javascript" src="TestFormPanel3.js"></script> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link> <style type="text/css"> </style> </head> <body> <SELECT ID="levelName"> <OPTION VALUE="1">高级工程师</OPTION> <OPTION VALUE="2">中级工程师</OPTION> <OPTION VALUE="3" SELECTED>初级工程师</OPTION> <OPTION VALUE="4">高级经济师</OPTION> <OPTION VALUE="5">中级经济师</OPTION> <OPTION VALUE="6">初级经济师</OPTION> </SELECT> </body> </html>
|
八、TimeField
TimeField时间选择框
示例一：简单应用。
Ext.onReady( function() { var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TimeField({ id:"time", fieldLabel:"时间" }) ] }); } );
示例二：12小时格式，24小时格式。
format属性：用来设置时间格式。
Ext.onReady( function() { // Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TimeField({ id:"time", fieldLabel:"时间", //format:"G时i分s秒" format:"g时i分s秒 A" }) ] }); } );
示例三：设置时间最大值和最小值。
maxValue属性，设置最大时间。
minValue属性，设置最小时间。
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TimeField({ id:"time", fieldLabel:"时间", //format:"G时i分s秒" format:"g时i分s秒 A", minValue:"12:22", maxValue:"14:22" }) ] }); } );
示例四：
时间不在指定区间内提示信息。
maxText属性，设置大于最大时间提示信息。
minText属性，设置小于最小时间提示信息。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TimeField({ id:"time", fieldLabel:"时间", //format:"G时i分s秒" format:"g时i分s秒 A", minValue:"12:22", maxValue:"14:22", minText:"时间必须大于{0}", maxText:"时间必须小于{0}" }) ] }); } );
示例五：
invalidText属性：设置时间格式无效提示信息。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TimeField({ id:"time", fieldLabel:"时间", //format:"G时i分s秒" format:"g时i分s秒 A", minValue:"12:22", maxValue:"14:22", minText:"时间必须大于{0}", maxText:"时间必须小于{0}", invalidText:"请输入正确的时间格式" }) ] }); } );
九、DateField
DateField日期选择框。
示例一：简单应用。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.DateField({ id:"date", fieldLabel:"选择日期" }) ] }); } );
示例二：设置最小和最大日期以及提示信息。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:300, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.DateField({ id:"date", fieldLabel:"选择日期", maxValue:"12/31/2015", minValue:"01/01/2015", maxText:"日期不能大于{0}", minText:"日期不能小于{0}" }) ] }); } );
示例三：设置日期格式。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.DateField({ id:"date", fieldLabel:"选择日期", format:"Y年m月d日", width:200 }) ] }); } );
示例四：指定禁止选择的日期。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.DateField({ id:"date", fieldLabel:"选择日期", maxValue:"12/31/2015", minValue:"01/01/2015", maxText:"日期不能大于{0}", minText:"日期不能小于{0}", format:"Y年m月d日", width:200, disabledDates:["2009年05月21日"], disabledDatesText :'禁止选择该日期' }) ] }); } );
注意：这个地方官方有bug，官方发布了解决方案。代码如下。
|
Ext.override(Ext.form.DateField, { initDisabledDays : function(){ if(this.disabledDates){ var dd = this.disabledDates; var re = "(?:"; for(var i = 0; i < dd.length; i++){ re += this.formatDate(dd[i]); if(i != dd.length-1) re += "|"; } this.ddMatch = new RegExp(re + ")"); } } }); |
示例五：设置禁止选择的星期。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.DateField({ id:"date", fieldLabel:"选择日期", maxValue:"12/31/2015", minValue:"01/01/2015", maxText:"日期不能大于{0}", minText:"日期不能小于{0}", format:"Y年m月d日", width:200, disabledDates:["2009年05月21日"], disabledDatesText :'禁止选择该日期', disabledDays : [0,6],//禁止选择星期日和星期六 disabledDaysText : '禁止选择星期六和星期日' }) ] }); } );
十、Hidden
Hidden隐藏域。
Ext.onReady( function() { Ext.BLANK_IMAGE_URL = "../Ext/resources/images/default/s.gif"; Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TextField({ name:'userName', width : 150, fieldLabel:'姓名' }), new Ext.form.Hidden({//隐藏域 name:'age', width : 150, fieldLabel:'年龄' }), new Ext.form.TextField({ name:'sex', width : 150, fieldLabel:'性别' }) ] }); } );
十一、FieldSet
FieldSet，可以用来将表单组件进行分组。
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.FieldSet({ title:"用户信息", height:100, collapsible:true, items:[ new Ext.form.TextField({ name:"username", fieldLabel:"用户名" }), new Ext.form.TextField({ name:"password", inputType:"password", fieldLabel:"密码" }) ] }), new Ext.form.FieldSet({ title:"高级信息", height:100, collapsible:true, items:[ new Ext.form.TextField({ name:"name", fieldLabel:"姓名" }) ] }) ] }); } );
十二、vtype
vtype属性，可以用来设置一个常用的校验规则，如邮箱，网址等。
示例：
Ext.onReady( function() { Ext.QuickTips.init(); var formPanle = new Ext.FormPanel({ renderTo:"hello", title:"formPanel", width:400, height:300, labelSeparator:"：", labelAlign:"right", frame:true, items:[ new Ext.form.TextField({ fieldLabel:'电子邮件', vtype:'email', vtypeText:"请输入正确的电子邮件格式" }), new Ext.form.TextField({ fieldLabel:'网址', vtype:'url', vtypeText:"请输入正确的网址" }), new Ext.form.TextField({ fieldLabel:'字母', vtype:'alpha', vtypeText:"请输入正确的字母" }), new Ext.form.TextField({ fieldLabel:'字母和数字', vtype:'alphanum', vtypeText:"请输入正确的字母和数字" }) ] }); } );
