ExtJS4学习笔记二－－表单控件相关二、表单部分相关HTML HEADTITLE提示信息/TITLEmeta http-equiv
ExtJS4学习笔记二－－表单控件相关
二、表单部分相关
<HTML> <HEAD> <TITLE>提示信息</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" /> <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script> <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();//初始化信息提示功能var form = new Ext.form.Panel({title:'表单',//表单标题height:120,//表单高度width:200,//表单宽度frame:true,//是否渲染表单renderTo :'form',defaults:{//统一设置表单字段默认属性//autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度labelSeparator :'：',//分隔符labelWidth : 50,//标签宽度width : 150,//字段宽度allowBlank : false,//是否允许为空blankText : '不允许为空',labelAlign : 'left',//标签对齐方式msgTarget :'qtip' //显示一个浮动的提示信息//msgTarget :'title' //显示一个浏览器原始的浮动提示信息//msgTarget :'under' //在字段下方显示一个提示信息//msgTarget :'side' //在字段的右边显示一个提示信息//msgTarget :'none' //不显示提示信息//msgTarget :'errorMsg' //在errorMsg元素内显示提示信息},items:[{xtype : 'textfield',fieldLabel : '姓名'//标签内容},{xtype : 'numberfield',fieldLabel : '年龄'}]});}); </script> </HEAD> <BODY STYLE="margin: 10px"> <div id='form'></div> <!-- 错误信息展示元素 --> <div id='errorMsg'></div> </BODY></HTML><div id='form'></div>
Ext.QuickTips.init();var loginForm = Ext.create('Ext.form.Panel',{title:'Ext.form.field.Text示例',bodyStyle:'padding:5 5 5 5',//表单边距frame : true,height:120,width:200,renderTo :'form',defaultType: 'textfield',//设置表单字段的默认类型defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 50,//标签宽度width : 150,//字段宽度allowBlank : false,//是否允许为空labelAlign : 'left',//标签对齐方式msgTarget :'side' //在字段的右边显示一个提示信息},items:[{fieldLabel : '用户名',name : 'userName',selectOnFocus : true,//得到焦点时自动选择文本//验证电子邮件格式的正则表达式regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,regexText:'格式错误'//验证错误之后的提示信息,},{name : 'password',fieldLabel : '密码',inputType : 'password'//设置输入类型为password}],buttons:[{text : '登陆',handler : function(){loginForm.form.setValues({userName:'user@com',password:'123456'});}}]});Ext.QuickTips.init();var testForm = Ext.create('Ext.form.Panel',{title:'Ext.form.field.TextArea示例',bodyStyle:'padding:5 5 5 5',//表单边距frame : true,height:150,width:250,renderTo :'form', //<div id='form'></div>items:[{xtype : 'textarea',fieldLabel : '备注',id:'memo',//字段组件idlabelSeparator :'：',//分隔符labelWidth : 60,//标签宽度width:200}],buttons:[{text:'确定',handler:showValue}]})function showValue(){var memo = testForm.getForm().findField('memo');//取得输入控件alert(memo.getValue());//取得控件值}//Ext.form.field.Number示例Ext.QuickTips.init();var form = Ext.create('Ext.form.FormPanel',{title:'Ext.form.field.Number示例',bodyStyle:'padding:5 5 5 5',//表单边距renderTo :'form',//<div id='form'></div>frame : true,height:150,width:250,defaultType: 'numberfield',//设置表单字段的默认类型defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 80,//标签宽度width : 200,//字段宽度labelAlign : 'left',//标签对齐方式msgTarget :'side' //在字段的右边显示一个提示信息},items:[{fieldLabel:'整数',hideTrigger : true,//隐藏微调按钮allowDecimals : false,//不允许输入小数nanText :'请输入有效的整数'//无效数字提示},{fieldLabel:'小数',decimalPrecision : 2,//精确到小数点后两位allowDecimals : true,//允许输入小数nanText :'请输入有效的小数'//无效数字提示},{fieldLabel:'数字限制',baseChars :'12345'//输入数字范围},{fieldLabel:'数值限制',maxValue : 100,//最大值minValue : 50//最小值}]});触发字段：
//Ext.form.field.Trigger示例var testForm = Ext.create('Ext.form.Panel',{title:'Ext.form.field.Trigger示例',bodyStyle:'padding:5 5 5 5',//表单边距frame : true,height:100,width:270,renderTo :'form',defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 70,//标签宽度width : 200,//字段宽度labelAlign : 'left'//标签对齐方式},items:[{xtype : 'triggerfield',id:'memo',fieldLabel:'触发字段',hideTrigger : false,//不隐藏触发按钮onTriggerClick : function(){var memo = testForm.getForm().findField('memo');//取得输入控件alert(memo.getValue());//取得控件值Ext.getCmp('memo').setValue('test');}}]});微调字段
//Ext.form.field.Spinner示例Ext.create('Ext.form.Panel',{title:'Ext.form.field.Spinner示例',bodyStyle:'padding:5 5 5 5',//表单边距frame : true,height:70,width:250,renderTo :'form',defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 70,//标签宽度width : 200,//字段宽度labelAlign : 'left'//标签对齐方式},items:[{xtype : 'spinnerfield',fieldLabel:'微调字段',id : 'salary',//组件idvalue : 100,//初始化字段值onSpinUp : function(){var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象//增加默认值salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);},onSpinDown : function(){var salaryCmp = Ext.getCmp('salary');//减小默认值salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);}}]});ComboBox本地数据源示例
//Ext.form.field.ComboBox本地数据源示例//创建数据模型Ext.regModel('PostInfo', { fields: [{name: 'province'},{name: 'post'}]});//定义组合框中显示的数据源var postStore = Ext.create('Ext.data.Store',{model : 'PostInfo',data : [{province:'北京',post:'100000'},{province:'通县',post:'101100'},{province:'昌平',post:'102200'},{province:'大兴',post:'102600'},{province:'密云',post:'101500'},{province:'延庆',post:'102100'},{province:'顺义',post:'101300'},{province:'怀柔',post:'101400'}]});//创建表单Ext.create('Ext.form.Panel',{title:'Ext.form.field.ComboBox本地数据源示例',renderTo: Ext.getBody(),bodyPadding: 5,frame : true,height:100,width:270,defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 70,//标签宽度width : 200,//字段宽度labelAlign : 'left'//标签对齐方式},items:[{xtype : 'combo',listConfig : {emptyText : '未找到匹配值',//当值不在列表是的提示信息maxHeight : 60//设置下拉列表的最大高度为60像素},name:'post',autoSelect : true,fieldLabel:'邮政编码',triggerAction: 'all',//单击触发按钮显示全部数据store : postStore,//设置数据源displayField:'province',//定义要显示的字段valueField:'post',//定义值字段queryMode: 'local',//本地模式forceSelection : true,//要求输入值必须在列表中存在typeAhead : true,//允许自动选择匹配的剩余部分文本value:'102600'//默认选择大兴}]});Ext.form.field.Time示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.field.Time示例',renderTo: Ext.getBody(),bodyPadding: 5,frame : true,height:100,width:300,items:[{fieldLabel:'时间选择框',xtype : 'timefield',width : 220,labelSeparator :'：',//分隔符msgTarget :'side',//在字段的右边显示一个提示信息autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度maxValue : '18:00',//最大时间maxText : '时间应小于{0}',//大于最大时间的提示信息minValue : '10:00',//最小时间minText : '时间应大于{0}',//小于最小时间的提示信息pickerMaxHeight : 70,//下拉列表的最大高度increment : 60,//时间间隔为60分钟format : 'G时i分s秒 ',//G标示为24时计时法invalidText :'时间格式无效'}]});Ext.form.field.Date示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.field.Time示例',renderTo: Ext.getBody(),bodyPadding: 5,frame : true,height:100,width:300,items:[{fieldLabel:'时间选择框',xtype : 'timefield',width : 220,labelSeparator :'：',//分隔符msgTarget :'side',//在字段的右边显示一个提示信息autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度maxValue : '18:00',//最大时间maxText : '时间应小于{0}',//大于最大时间的提示信息minValue : '10:00',//最小时间minText : '时间应大于{0}',//小于最小时间的提示信息pickerMaxHeight : 70,//下拉列表的最大高度increment : 60,//时间间隔为60分钟format : 'G时i分s秒 ',//G标示为24时计时法invalidText :'时间格式无效'}]});Ext.form.field.Hidden示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.field.Hidden示例',frame : true,height:100,width:300,renderTo: Ext.getBody(),bodyPadding: 5,defaultType: 'textfield',//设置表单字段的默认类型defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 70,//标签宽度width : 200,//字段宽度labelAlign : 'left'//标签对齐方式},items:[{name:'userName',fieldLabel:'姓名'},{//隐藏域name:'age',xtype : 'hidden'},{name:'sex',fieldLabel:'性别'}]});Ext.form.field.HtmlEditor示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.field.HtmlEditor示例',width : 630,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,items:[{fieldLabel:'HTML字段',xtype : 'htmleditor',height:150,width : 600,value : 'ExtJS4登场',labelWidth : 70,//标签宽度labelSeparator :'：',//分隔符createLinkText : '创建超链接',//创建连接的提示信息defaultLinkValue : "http://www.",//连接的默认格式enableAlignments : true,//起用左、中、右对齐按钮enableColors : true,//起用前景色、背景色选择按钮enableFont : true,//起用字体选择按钮enableFontSize : true,//起用字体增大和缩写按钮enableFormat : true,//起用粗体、斜体、下划线按钮enableLinks : true,//起用创建连接按钮enableLists : true,//起用列表按钮enableSourceEdit : true,//起用源代码编辑按钮fontFamilies:['宋体','隶书','黑体'],//字体列表buttonTips :{bold : {title: 'Bold (Ctrl+B)',text: '粗体'},italic : {title: 'Italic (Ctrl+I)',text: '斜体'},underline : {title: 'Underline (Ctrl+U)',text: '下划线'},increasefontsize : {title: 'Grow Text',text: '增大字体'},decreasefontsize : {title: 'Shrink Text',text: '缩小字体'},backcolor : {title: 'Text Highlight Color',text: '背景色'},forecolor : {title: 'Font Color',text: '前景色'},justifyleft : {title: 'Align Text Left',text: '左对齐'},justifycenter : {title: 'Center Text',text: '居中对齐'},justifyright : {title: 'Align Text Right',text: '右对齐'},insertunorderedlist : {title: 'Bullet List',text: '项目符号'},insertorderedlist : {title: 'Numbered List',text: '数字编号'},createlink : {title: 'Hyperlink',text: '超连接'},sourceedit : {title: 'Source Edit',text: '切换源代码编辑模式'}}}]});Ext.form.field.Display示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.field.Display示例',width : 200,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,items:[{fieldLabel:'展示字段',xtype : 'displayfield',value : '<b>ExtJS4登场</b>',labelWidth : 70,//标签宽度labelSeparator :'：'//分隔符}]});Ext.form.Label示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.Label示例',width : 200,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,items:[ { xtype: 'label', forId: 'userName',//关联inputId为userName的表单字段 text: '用户名' },{name:'userName',xtype : 'textfield',inputId : 'userName',hideLabel : true //隐藏字段标签}]});Ext.form.FieldSet示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.FieldSet示例',labelWidth : 40,//标签宽度width : 220,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,items:[{title:'产品信息',xtype : 'fieldset',collapsible : true,//显示切换展开收缩状态的切换按钮bodyPadding: 5,defaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 50,//标签宽度width : 160//字段宽度},defaultType: 'textfield',//设置表单字段的默认类型items:[{fieldLabel:'产地'},{fieldLabel:'售价'}]},{title:'产品描述',xtype : 'fieldset',bodyPadding: 5,checkboxToggle : true,//显示切换展开收缩状态的复选框checkboxName : 'description',//提交数据时复选框对应的namelabelSeparator :'：',//分隔符items:[{fieldLabel:'简介',labelSeparator :'：',//分隔符labelWidth : 50,//标签宽度width : 160,//字段宽度xtype : 'textarea'}]}]});Ext.form.FieldContainer示例：
Ext.create('Ext.form.Panel',{title:'Ext.form.FieldContainer示例',width : 300,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,fieldDefaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 60,//标签宽度width : 260,//字段宽度msgTarget : 'side'},defaultType: 'textfield',//设置表单字段的默认类型items:[{fieldLabel:'商品名称'},{ xtype: 'fieldcontainer', fieldLabel: '生产日期', layout: {//设置容器字段布局 type: 'hbox', align: 'middle'//垂直居中 }, combineErrors : true,//合并展示错误信息 fieldDefaults: { hideLabel: true,//隐藏字段标签 allowBlank : false//设置字段值不允许为空 }, defaultType: 'textfield',//设置表单字段的默认类型 items: [{ fieldLabel: '年', flex: 1, inputId : 'yearId' },{ xtype: 'label', forId : 'yearId', text: '年' },{ fieldLabel: '月', flex: 1, inputId : 'monthId' },{ xtype: 'label', forId : 'monthId', text: '月' },{ fieldLabel: '日', flex: 1, inputId : 'dayId' },{ xtype: 'label', forId : 'dayId', text: '日' }] },{fieldLabel:'产地来源'}]});vtype示例：
Ext.create('Ext.form.Panel',{title:'vtype示例',width : 300,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,defaultType: 'textfield',//设置表单字段的默认类型fieldDefaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 80,//标签宽度width : 270,//字段宽度msgTarget : 'side'},items:[{fieldLabel:'电子邮件',vtype:'email'},{fieldLabel:'网址',vtype:'url'},{fieldLabel:'字母',vtype:'alpha'},{fieldLabel:'字母和数字',vtype:'alphanum'}]});自定义电话号码验证示例：
//自定义电话号码的vtype验证Ext.apply(Ext.form.field.VTypes, { phone: function(v) { //规则区号（3-4位数字）-电话号码（7-8位数字） return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v); }, phoneText: '请输入有效的电话号码', phoneMask: /[\d-]/i//只允许输入数字和-号});Ext.QuickTips.init();Ext.create('Ext.form.Panel',{title:'自定义电话号码验证示例',width : 300,frame : true,renderTo: Ext.getBody(),bodyPadding: 5,defaultType: 'textfield',//设置表单字段的默认类型fieldDefaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 80,//标签宽度width : 270,//字段宽度msgTarget : 'side'},items:[{fieldLabel:'住宅号码',vtype:'phone'//使用电话类型验证},{fieldLabel:'办公号码',vtype:'phone'//使用电话类型验证}]});自定义日期范围验证示例：
//自定义VType类型，验证日期选择范围Ext.apply(Ext.form.field.VTypes, {//验证方法dateRange : function(val, field) {var beginDate = null,//开始日期beginDateCmp = null,//开始日期组件endDate = null,//结束日期endDateCmp = null,//结束日期组件validStatus = true;//验证状态if(field.dateRange){//获取开始时间if(!Ext.isEmpty(field.dateRange.begin)){beginDateCmp = Ext.getCmp(field.dateRange.begin);beginDate = beginDateCmp.getValue();}//获取结束时间if(!Ext.isEmpty(field.dateRange.end)){endDateCmp = Ext.getCmp(field.dateRange.end);endDate = endDateCmp.getValue();}}//如果开始日期或结束日期有一个为空则校验通过if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){validStatus = beginDate <= endDate;}return validStatus;},//验证提示信息dateRangeText : '开始日期不能大于结束日期，请重新选择。'});Ext.QuickTips.init();//初始化提示;var dateForm = Ext.create('Ext.form.Panel',{title:'自定义日期范围验证示例',frame : true,width:250,renderTo: Ext.getBody(),bodyPadding: 5,fieldDefaults:{//统一设置表单字段默认属性autoFitErrors : false,//不自动调整字段宽度labelSeparator :'：',//分隔符labelWidth : 90,//标签宽度width : 210,//字段宽度format:'Y年n月j日',//显示日期的格式editable : false,//设置只读allowBlank : false,//不允许为空msgTarget : 'side'//设置提示信息展示位置},defaultType: 'datefield',//设置表单字段的默认类型items:[{id:'beginDate1',fieldLabel:'入学开始日期',dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRangevtype:'dateRange'},{id:'endDate1',fieldLabel:'入学结束日期',dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRangevtype:'dateRange'},{id:'beginDate2',fieldLabel:'毕业开始日期',dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRangevtype:'dateRange'},{id:'endDate2',fieldLabel:'毕业结束日期',dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRangevtype:'dateRange'}]});Ajax模式的表单数据加载：
<HTML> <HEAD> <TITLE>Ajax模式的表单数据加载</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs4/bootstrap.js"></script> <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script> <script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();//初始化提示;var productForm = Ext.create('Ext.form.Panel',{title:'表单加载示例',width : 300,frame : true,fieldDefaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 80,//标签宽度width : 200},renderTo: Ext.getBody(),items:[{fieldLabel:'产品名称',xtype : 'textfield',name : 'productName',value:'U盘'//同步加载数据},{fieldLabel:'金额',xtype : 'numberfield',name : 'price',value : 100//同步加载数据},{fieldLabel:'生产日期',xtype : 'datefield',format:'Y年m月d日',//显示日期的格式name : 'date',value : new Date()//同步加载数据},{xtype : 'hidden',name : 'productId',value:'001'//产品id},{fieldLabel:'产品简介',name : 'introduction',xtype : 'textarea'}],buttons:[{text : '加载简介',handler : loadIntroduction}]});//表单加载数据的回调函数function loadIntroduction(){var params = productForm.getForm().getValues();productForm.getForm().load({params : params,//传递参数url : 'productServer.jsp',//请求的url地址method:'GET',//请求方式success:function(form,action){//加载成功的处理函数Ext.Msg.alert('提示','产品简介加载成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);}});}}); </script> </HEAD> <BODY STYLE="margin: 10px"></BODY></HTML><%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%//获取产品idString productId = request.getParameter("productId");if("001".equals(productId)){String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";response.getWriter().write(msg);}else{String msg = "{success:false,errorMessage:'数据不存在'}";response.getWriter().write(msg);}%>另外一种方式：
public String getProductInfo(String productId){String msg = "";if("001".equals(productId)){msg = "1本产品美观实用，售后服务优秀。";}else{msg = "0数据不存在";}return msg;}//表单加载数据的回调函数function loadIntroduction(){var params = productForm.getForm().getValues();testdwr.getProductInfo(params.productId,function(ret){if(ret.substring(0,1) == '1'){Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));Ext.Msg.alert('提示','产品简介加载成功');}else{Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));}});}登录简单处理：
<HTML> <HEAD> <TITLE>Ajax模式的表单数据提交</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs4/bootstrap.js"></script> <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script> <script type="text/javascript">Ext.onReady(function(){Ext.QuickTips.init();//初始化提示;var loginForm = Ext.create('Ext.form.Panel',{title:'表单提交示例',width : 230,frame : true,fieldDefaults:{//统一设置表单字段默认属性labelSeparator :'：',//分隔符labelWidth : 50,//标签宽度msgTarget : 'side',width : 200},renderTo: Ext.getBody(),bodyPadding: 5,defaultType: 'textfield',//设置表单字段的默认类型items:[{fieldLabel:'用户名',name : 'userName',allowBlank : false,vtype:'email'},{fieldLabel:'密码',name : 'password',inputType : 'password',allowBlank : false}],buttons:[{text : '登陆',handler : login},{text : '重置',handler : reset}]});function login(){//提交表单loginForm.getForm().submit({clientValidation:true,//进行客户端验证url : 'loginServer.jsp',//请求的url地址method:'GET',//请求方式success:function(form,action){//加载成功的处理函数Ext.Msg.alert('提示','系统登陆成功');},failure:function(form,action){//加载失败的处理函数Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);}});}function reset(){//重置表单loginForm.form.reset();}}); </script> </HEAD> <BODY STYLE="margin: 10px"></BODY></HTML><%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String password = request.getParameter("password");String msg = "";if(password.length() < 6){//密码不足6位验证失败msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";}else{//验证成功msg = "{success:true}";}response.getWriter().write(msg);%> 
2 楼 yin_jw 2011-11-07 自定义日期范围验证示例 有一个bug 3 楼 yin_jw 2011-11-07 当前日期为某月31号时（只有这一天），点击日期控件选择年月界面，双击9，没有进入9月的页面