您的位置: 首页  >  IT文章  >  ExtJS4学习札记二－－表单控件相关

ExtJS4学习札记二－－表单控件相关

分类: IT文章 • 2022-07-20 17:05:51
ExtJS4学习笔记二－－表单控件相关

二、表单部分相关 

Html代码  ExtJS4学习札记二－－表单控件相关
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>提示信息</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化信息提示功能  
  11.         var form = new Ext.form.Panel({  
  12.             title:'表单',//表单标题  
  13.             height:120,//表单高度  
  14.             width:200,//表单宽度  
  15.             frame:true,//是否渲染表单  
  16.             renderTo :'form',  
  17.             defaults:{//统一设置表单字段默认属性  
  18.                 //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度  
  19.                 labelSeparator :'：',//分隔符  
  20.                 labelWidth : 50,//标签宽度  
  21.                 width : 150,//字段宽度  
  22.                 allowBlank : false,//是否允许为空  
  23.                 blankText : '不允许为空',  
  24.                 labelAlign : 'left',//标签对齐方式  
  25.                 msgTarget :'qtip'          //显示一个浮动的提示信息  
  26.                 //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息  
  27.                 //msgTarget :'under'       //在字段下方显示一个提示信息  
  28.                 //msgTarget :'side'        //在字段的右边显示一个提示信息  
  29.                 //msgTarget :'none'        //不显示提示信息  
  30.                 //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息  
  31.             },  
  32.             items:[{  
  33.                 xtype : 'textfield',  
  34.                 fieldLabel : '姓名'//标签内容  
  35.             },{  
  36.                 xtype : 'numberfield',  
  37.                 fieldLabel : '年龄'  
  38.             }]  
  39.         });  
  40.     });  
  41.   </script>  
  42.  </HEAD>  
  43.  <BODY STYLE="margin: 10px">  
  44.     <div id='form'></div>  
  45.     <!-- 错误信息展示元素 -->  
  46.     <div id='errorMsg'></div>  
  47.  </BODY>  
  48. </HTML>  

Html代码  ExtJS4学习札记二－－表单控件相关
  1. <div id='form'></div>  

Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.QuickTips.init();  
  2.         var loginForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Text示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表单边距  
  5.             frame : true,  
  6.             height:120,  
  7.             width:200,  
  8.             renderTo :'form',  
  9.             defaultType: 'textfield',//设置表单字段的默认类型  
  10.             defaults:{//统一设置表单字段默认属性  
  11.                 labelSeparator :'：',//分隔符  
  12.                 labelWidth : 50,//标签宽度  
  13.                 width : 150,//字段宽度  
  14.                 allowBlank : false,//是否允许为空  
  15.                 labelAlign : 'left',//标签对齐方式  
  16.                 msgTarget :'side'   //在字段的右边显示一个提示信息  
  17.             },  
  18.             items:[{  
  19.                     fieldLabel : '用户名',  
  20.                     name : 'userName',  
  21.                     selectOnFocus : true,//得到焦点时自动选择文本  
  22.                     //验证电子邮件格式的正则表达式  
  23.                     regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,  
  24.                     regexText:'格式错误'//验证错误之后的提示信息,  
  25.                 },{  
  26.                     name : 'password',  
  27.                     fieldLabel : '密码',  
  28.                     inputType : 'password'//设置输入类型为password  
  29.                 }  
  30.             ],  
  31.             buttons:[{  
  32.                 text : '登陆',  
  33.                 handler : function(){  
  34.                     loginForm.form.setValues({userName:'user@com',password:'123456'});  
  35.                 }  
  36.             }]  
  37.         });  

Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.QuickTips.init();  
  2.         var testForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.TextArea示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表单边距  
  5.             frame : true,  
  6.             height:150,  
  7.             width:250,  
  8.             renderTo :'form',  //<div id='form'></div>  
  9.             items:[{  
  10.                 xtype : 'textarea',  
  11.                 fieldLabel : '备注',  
  12.                 id:'memo',//字段组件id  
  13.                 labelSeparator :'：',//分隔符  
  14.                 labelWidth : 60,//标签宽度  
  15.                 width:200  
  16.             }],  
  17.             buttons:[{text:'确定',handler:showValue}]  
  18.         })  
  19.         function showValue(){  
  20.             var memo = testForm.getForm().findField('memo');//取得输入控件  
  21.             alert(memo.getValue());//取得控件值  
  22.         }  

Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //Ext.form.field.Number示例  
  2.         Ext.QuickTips.init();  
  3.         var form = Ext.create('Ext.form.FormPanel',{  
  4.             title:'Ext.form.field.Number示例',  
  5.             bodyStyle:'padding:5 5 5 5',//表单边距  
  6.             renderTo :'form',   //<div id='form'></div>  
  7.             frame : true,  
  8.             height:150,  
  9.             width:250,  
  10.             defaultType: 'numberfield',//设置表单字段的默认类型  
  11.             defaults:{//统一设置表单字段默认属性  
  12.                 labelSeparator :'：',//分隔符  
  13.                 labelWidth : 80,//标签宽度  
  14.                 width : 200,//字段宽度  
  15.                 labelAlign : 'left',//标签对齐方式  
  16.                 msgTarget :'side'   //在字段的右边显示一个提示信息  
  17.             },  
  18.             items:[{  
  19.                 fieldLabel:'整数',  
  20.                 hideTrigger : true,//隐藏微调按钮  
  21.                 allowDecimals : false,//不允许输入小数  
  22.                 nanText :'请输入有效的整数'//无效数字提示  
  23.             },{  
  24.                 fieldLabel:'小数',  
  25.                 decimalPrecision : 2,//精确到小数点后两位  
  26.                 allowDecimals : true,//允许输入小数  
  27.                 nanText :'请输入有效的小数'//无效数字提示  
  28.             },{  
  29.                 fieldLabel:'数字限制',  
  30.                 baseChars :'12345'//输入数字范围  
  31.             },{  
  32.                 fieldLabel:'数值限制',  
  33.                 maxValue : 100,//最大值  
  34.                 minValue : 50//最小值  
  35.             }]  
  36.         });  

触发字段： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //Ext.form.field.Trigger示例  
  2.         var testForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Trigger示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表单边距  
  5.             frame : true,  
  6.             height:100,  
  7.             width:270,  
  8.             renderTo :'form',  
  9.             defaults:{//统一设置表单字段默认属性  
  10.                 labelSeparator :'：',//分隔符  
  11.                 labelWidth : 70,//标签宽度  
  12.                 width : 200,//字段宽度  
  13.                 labelAlign : 'left'//标签对齐方式  
  14.             },  
  15.             items:[{  
  16.                 xtype : 'triggerfield',  
  17.                 id:'memo',  
  18.                 fieldLabel:'触发字段',  
  19.                 hideTrigger : false,//不隐藏触发按钮  
  20.                 onTriggerClick : function(){  
  21.                     var memo = testForm.getForm().findField('memo');//取得输入控件  
  22.                     alert(memo.getValue());//取得控件值  
  23.                     Ext.getCmp('memo').setValue('test');  
  24.                 }  
  25.             }]  
  26.         });  

微调字段 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //Ext.form.field.Spinner示例  
  2.         Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Spinner示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表单边距  
  5.             frame : true,  
  6.             height:70,  
  7.             width:250,  
  8.             renderTo :'form',  
  9.             defaults:{//统一设置表单字段默认属性  
  10.                 labelSeparator :'：',//分隔符  
  11.                 labelWidth : 70,//标签宽度  
  12.                 width : 200,//字段宽度  
  13.                 labelAlign : 'left'//标签对齐方式  
  14.             },  
  15.             items:[{  
  16.                 xtype : 'spinnerfield',  
  17.                 fieldLabel:'微调字段',  
  18.                 id : 'salary',//组件id  
  19.                 value : 100,//初始化字段值  
  20.                 onSpinUp : function(){  
  21.                     var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象  
  22.                     //增加默认值  
  23.                     salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);  
  24.                 },  
  25.                 onSpinDown : function(){  
  26.                     var salaryCmp = Ext.getCmp('salary');  
  27.                     //减小默认值  
  28.                     salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);  
  29.                 }  
  30.             }]  
  31.         });  

ComboBox本地数据源示例 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //Ext.form.field.ComboBox本地数据源示例  
  2.         //创建数据模型  
  3.         Ext.regModel('PostInfo', {  
  4.             fields: [{name: 'province'},{name: 'post'}]  
  5.         });  
  6.         //定义组合框中显示的数据源  
  7.         var postStore = Ext.create('Ext.data.Store',{  
  8.             model : 'PostInfo',  
  9.             data : [  
  10.                 {province:'北京',post:'100000'},  
  11.                 {province:'通县',post:'101100'},  
  12.                 {province:'昌平',post:'102200'},  
  13.                 {province:'大兴',post:'102600'},  
  14.                 {province:'密云',post:'101500'},  
  15.                 {province:'延庆',post:'102100'},  
  16.                 {province:'顺义',post:'101300'},  
  17.                 {province:'怀柔',post:'101400'}  
  18.             ]  
  19.         });  
  20.         //创建表单  
  21.         Ext.create('Ext.form.Panel',{  
  22.             title:'Ext.form.field.ComboBox本地数据源示例',  
  23.             renderTo: Ext.getBody(),  
  24.             bodyPadding: 5,  
  25.             frame : true,  
  26.             height:100,  
  27.             width:270,  
  28.             defaults:{//统一设置表单字段默认属性  
  29.                 labelSeparator :'：',//分隔符  
  30.                 labelWidth : 70,//标签宽度  
  31.                 width : 200,//字段宽度  
  32.                 labelAlign : 'left'//标签对齐方式  
  33.             },  
  34.             items:[{  
  35.                 xtype : 'combo',  
  36.                 listConfig : {  
  37.                     emptyText : '未找到匹配值',//当值不在列表是的提示信息  
  38.                     maxHeight : 60//设置下拉列表的最大高度为60像素  
  39.                 },  
  40.                 name:'post',  
  41.                 autoSelect : true,  
  42.                 fieldLabel:'邮政编码',  
  43.                 triggerAction: 'all',//单击触发按钮显示全部数据  
  44.                 store : postStore,//设置数据源  
  45.                 displayField:'province',//定义要显示的字段  
  46.                 valueField:'post',//定义值字段  
  47.                 queryMode: 'local',//本地模式  
  48.                 forceSelection : true,//要求输入值必须在列表中存在  
  49.                 typeAhead : true,//允许自动选择匹配的剩余部分文本  
  50.                 value:'102600'//默认选择大兴  
  51.             }]  
  52.         });  

Ext.form.field.Time示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Time示例',  
  3.             renderTo: Ext.getBody(),  
  4.             bodyPadding: 5,  
  5.             frame : true,  
  6.             height:100,  
  7.             width:300,  
  8.             items:[{  
  9.                 fieldLabel:'时间选择框',  
  10.                 xtype : 'timefield',  
  11.                 width : 220,  
  12.                 labelSeparator :'：',//分隔符  
  13.                 msgTarget :'side',//在字段的右边显示一个提示信息  
  14.                 autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度  
  15.                 maxValue : '18:00',//最大时间  
  16.                 maxText : '时间应小于{0}',//大于最大时间的提示信息  
  17.                 minValue : '10:00',//最小时间  
  18.                 minText : '时间应大于{0}',//小于最小时间的提示信息  
  19.                 pickerMaxHeight : 70,//下拉列表的最大高度  
  20.                 increment : 60,//时间间隔为60分钟  
  21.                 format : 'G时i分s秒 ',//G标示为24时计时法  
  22.                 invalidText :'时间格式无效'  
  23.             }]  
  24.         });  

Ext.form.field.Date示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Time示例',  
  3.             renderTo: Ext.getBody(),  
  4.             bodyPadding: 5,  
  5.             frame : true,  
  6.             height:100,  
  7.             width:300,  
  8.             items:[{  
  9.                 fieldLabel:'时间选择框',  
  10.                 xtype : 'timefield',  
  11.                 width : 220,  
  12.                 labelSeparator :'：',//分隔符  
  13.                 msgTarget :'side',//在字段的右边显示一个提示信息  
  14.                 autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度  
  15.                 maxValue : '18:00',//最大时间  
  16.                 maxText : '时间应小于{0}',//大于最大时间的提示信息  
  17.                 minValue : '10:00',//最小时间  
  18.                 minText : '时间应大于{0}',//小于最小时间的提示信息  
  19.                 pickerMaxHeight : 70,//下拉列表的最大高度  
  20.                 increment : 60,//时间间隔为60分钟  
  21.                 format : 'G时i分s秒 ',//G标示为24时计时法  
  22.                 invalidText :'时间格式无效'  
  23.             }]  
  24.         });  

Ext.form.field.Hidden示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Hidden示例',  
  3.             frame : true,  
  4.             height:100,  
  5.             width:300,  
  6.             renderTo: Ext.getBody(),  
  7.             bodyPadding: 5,  
  8.             defaultType: 'textfield',//设置表单字段的默认类型  
  9.             defaults:{//统一设置表单字段默认属性  
  10.                 labelSeparator :'：',//分隔符  
  11.                 labelWidth : 70,//标签宽度  
  12.                 width : 200,//字段宽度  
  13.                 labelAlign : 'left'//标签对齐方式  
  14.             },  
  15.             items:[{  
  16.                 name:'userName',  
  17.                 fieldLabel:'姓名'  
  18.             },{//隐藏域  
  19.                 name:'age',  
  20.                 xtype : 'hidden'  
  21.             },{  
  22.                 name:'sex',  
  23.                 fieldLabel:'性别'  
  24.             }]  
  25.         });  

Ext.form.field.HtmlEditor示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.HtmlEditor示例',  
  3.             width : 630,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             items:[{  
  8.                 fieldLabel:'HTML字段',  
  9.                 xtype : 'htmleditor',  
  10.                 height:150,  
  11.                 width : 600,  
  12.                 value : 'ExtJS4登场',  
  13.                 labelWidth : 70,//标签宽度  
  14.                 labelSeparator :'：',//分隔符  
  15.                 createLinkText : '创建超链接',//创建连接的提示信息  
  16.                 defaultLinkValue : "http://www.",//连接的默认格式  
  17.                 enableAlignments : true,//起用左、中、右对齐按钮  
  18.                 enableColors : true,//起用前景色、背景色选择按钮  
  19.                 enableFont : true,//起用字体选择按钮  
  20.                 enableFontSize : true,//起用字体增大和缩写按钮  
  21.                 enableFormat : true,//起用粗体、斜体、下划线按钮  
  22.                 enableLinks : true,//起用创建连接按钮  
  23.                 enableLists : true,//起用列表按钮  
  24.                 enableSourceEdit : true,//起用源代码编辑按钮  
  25.                 fontFamilies:['宋体','隶书','黑体'],//字体列表  
  26.                 buttonTips :{  
  27.                     bold : {  
  28.                         title: 'Bold (Ctrl+B)',  
  29.                         text: '粗体'  
  30.                     },  
  31.                     italic : {  
  32.                         title: 'Italic (Ctrl+I)',  
  33.                         text: '斜体'  
  34.                     },  
  35.                     underline : {  
  36.                         title: 'Underline (Ctrl+U)',  
  37.                         text: '下划线'  
  38.                     },  
  39.                     increasefontsize : {  
  40.                         title: 'Grow Text',  
  41.                         text: '增大字体'  
  42.                     },  
  43.                     decreasefontsize : {  
  44.                         title: 'Shrink Text',  
  45.                         text: '缩小字体'  
  46.                     },  
  47.                     backcolor : {  
  48.                         title: 'Text Highlight Color',  
  49.                         text: '背景色'  
  50.                     },  
  51.                     forecolor : {  
  52.                         title: 'Font Color',  
  53.                         text: '前景色'  
  54.                     },  
  55.                     justifyleft : {  
  56.                         title: 'Align Text Left',  
  57.                         text: '左对齐'  
  58.                     },  
  59.                     justifycenter : {  
  60.                         title: 'Center Text',  
  61.                         text: '居中对齐'  
  62.                     },  
  63.                     justifyright : {  
  64.                         title: 'Align Text Right',  
  65.                         text: '右对齐'  
  66.                     },  
  67.                     insertunorderedlist : {  
  68.                         title: 'Bullet List',  
  69.                         text: '项目符号'  
  70.                     },  
  71.                     insertorderedlist : {  
  72.                         title: 'Numbered List',  
  73.                         text: '数字编号'  
  74.                     },  
  75.                     createlink : {  
  76.                         title: 'Hyperlink',  
  77.                         text: '超连接'  
  78.                     },  
  79.                     sourceedit : {  
  80.                         title: 'Source Edit',  
  81.                         text: '切换源代码编辑模式'  
  82.                     }  
  83.                 }  
  84.             }]  
  85.         });  

Ext.form.field.Display示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Display示例',  
  3.             width : 200,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             items:[{  
  8.                 fieldLabel:'展示字段',  
  9.                 xtype : 'displayfield',  
  10.                 value : '<b>ExtJS4登场</b>',  
  11.                 labelWidth : 70,//标签宽度  
  12.                 labelSeparator :'：'//分隔符  
  13.             }]  
  14.         });  

Ext.form.Label示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.Label示例',  
  3.             width : 200,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             items:[ {  
  8.                 xtype: 'label',  
  9.                 forId: 'userName',//关联inputId为userName的表单字段  
  10.                 text: '用户名'  
  11.             },{  
  12.                 name:'userName',  
  13.                 xtype : 'textfield',  
  14.                 inputId : 'userName',  
  15.                 hideLabel : true //隐藏字段标签  
  16.             }]  
  17.         });  

Ext.form.FieldSet示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.FieldSet示例',  
  3.             labelWidth : 40,//标签宽度  
  4.             width : 220,  
  5.             frame : true,  
  6.             renderTo: Ext.getBody(),  
  7.             bodyPadding: 5,  
  8.             items:[{  
  9.                 title:'产品信息',  
  10.                 xtype : 'fieldset',  
  11.                 collapsible : true,//显示切换展开收缩状态的切换按钮  
  12.                 bodyPadding: 5,  
  13.                 defaults:{//统一设置表单字段默认属性  
  14.                     labelSeparator :'：',//分隔符  
  15.                     labelWidth : 50,//标签宽度  
  16.                     width : 160//字段宽度  
  17.                 },  
  18.                 defaultType: 'textfield',//设置表单字段的默认类型  
  19.                 items:[{  
  20.                     fieldLabel:'产地'  
  21.                 },{  
  22.                     fieldLabel:'售价'  
  23.                 }]  
  24.             },{  
  25.                 title:'产品描述',  
  26.                 xtype : 'fieldset',  
  27.                 bodyPadding: 5,  
  28.                 checkboxToggle : true,//显示切换展开收缩状态的复选框  
  29.                 checkboxName : 'description',//提交数据时复选框对应的name  
  30.                 labelSeparator :'：',//分隔符  
  31.                 items:[{  
  32.                     fieldLabel:'简介',  
  33.                     labelSeparator :'：',//分隔符  
  34.                     labelWidth : 50,//标签宽度  
  35.                     width : 160,//字段宽度  
  36.                     xtype : 'textarea'  
  37.                 }]  
  38.             }]  
  39.         });  

Ext.form.FieldContainer示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.FieldContainer示例',  
  3.             width : 300,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             fieldDefaults:{//统一设置表单字段默认属性  
  8.                 labelSeparator :'：',//分隔符  
  9.                 labelWidth : 60,//标签宽度  
  10.                 width : 260,//字段宽度  
  11.                 msgTarget : 'side'  
  12.             },  
  13.             defaultType: 'textfield',//设置表单字段的默认类型  
  14.             items:[{  
  15.                 fieldLabel:'商品名称'  
  16.             },{  
  17.                 xtype: 'fieldcontainer',  
  18.                 fieldLabel: '生产日期',  
  19.                 layout: {//设置容器字段布局  
  20.                     type: 'hbox',  
  21.                     align: 'middle'//垂直居中  
  22.                 },  
  23.                 combineErrors : true,//合并展示错误信息  
  24.                 fieldDefaults: {  
  25.                     hideLabel: true,//隐藏字段标签  
  26.                     allowBlank : false//设置字段值不允许为空  
  27.                 },  
  28.                 defaultType: 'textfield',//设置表单字段的默认类型  
  29.                 items: [{  
  30.                     fieldLabel: '年',  
  31.                     flex: 1,  
  32.                     inputId : 'yearId'  
  33.                 },{  
  34.                     xtype: 'label',  
  35.                     forId : 'yearId',  
  36.                     text: '年'  
  37.                 },{  
  38.                     fieldLabel: '月',  
  39.                     flex: 1,  
  40.                     inputId : 'monthId'  
  41.                 },{  
  42.                     xtype: 'label',  
  43.                     forId : 'monthId',  
  44.                     text: '月'  
  45.                 },{  
  46.                     fieldLabel: '日',  
  47.                     flex: 1,  
  48.                     inputId : 'dayId'  
  49.                 },{  
  50.                     xtype: 'label',  
  51.                     forId : 'dayId',  
  52.                     text: '日'  
  53.                 }]  
  54.             },{  
  55.                 fieldLabel:'产地来源'  
  56.             }]  
  57.         });  

vtype示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'vtype示例',  
  3.             width : 300,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             defaultType: 'textfield',//设置表单字段的默认类型  
  8.             fieldDefaults:{//统一设置表单字段默认属性  
  9.                 labelSeparator :'：',//分隔符  
  10.                 labelWidth : 80,//标签宽度  
  11.                 width : 270,//字段宽度  
  12.                 msgTarget : 'side'  
  13.             },  
  14.             items:[{  
  15.                 fieldLabel:'电子邮件',  
  16.                 vtype:'email'  
  17.             },{  
  18.                 fieldLabel:'网址',  
  19.                 vtype:'url'  
  20.             },{  
  21.                 fieldLabel:'字母',  
  22.                 vtype:'alpha'  
  23.             },{  
  24.                 fieldLabel:'字母和数字',  
  25.                 vtype:'alphanum'  
  26.             }]  
  27.         });  

自定义电话号码验证示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //自定义电话号码的vtype验证  
  2.         Ext.apply(Ext.form.field.VTypes, {  
  3.             phone:  function(v) {  
  4.                 //规则区号（3-4位数字）-电话号码（7-8位数字）  
  5.                 return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);  
  6.             },  
  7.             phoneText: '请输入有效的电话号码',  
  8.             phoneMask: /[\d-]/i//只允许输入数字和-号  
  9.         });  
  10.         Ext.QuickTips.init();  
  11.         Ext.create('Ext.form.Panel',{  
  12.             title:'自定义电话号码验证示例',  
  13.             width : 300,  
  14.             frame : true,  
  15.             renderTo: Ext.getBody(),  
  16.             bodyPadding: 5,  
  17.             defaultType: 'textfield',//设置表单字段的默认类型  
  18.             fieldDefaults:{//统一设置表单字段默认属性  
  19.                 labelSeparator :'：',//分隔符  
  20.                 labelWidth : 80,//标签宽度  
  21.                 width : 270,//字段宽度  
  22.                 msgTarget : 'side'  
  23.             },  
  24.             items:[{  
  25.                 fieldLabel:'住宅号码',  
  26.                 vtype:'phone'//使用电话类型验证  
  27.             },{  
  28.                 fieldLabel:'办公号码',  
  29.                 vtype:'phone'//使用电话类型验证  
  30.             }]  
  31.         });  

自定义日期范围验证示例： 
Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //自定义VType类型，验证日期选择范围  
  2.         Ext.apply(Ext.form.field.VTypes, {  
  3.             //验证方法  
  4.             dateRange : function(val, field) {  
  5.                 var beginDate = null,//开始日期  
  6.                     beginDateCmp = null,//开始日期组件  
  7.                     endDate = null,//结束日期  
  8.                     endDateCmp = null,//结束日期组件  
  9.                     validStatus = true;//验证状态  
  10.                 if(field.dateRange){  
  11.                     //获取开始时间  
  12.                     if(!Ext.isEmpty(field.dateRange.begin)){  
  13.                         beginDateCmp = Ext.getCmp(field.dateRange.begin);  
  14.                         beginDate = beginDateCmp.getValue();  
  15.                     }  
  16.                     //获取结束时间  
  17.                     if(!Ext.isEmpty(field.dateRange.end)){  
  18.                         endDateCmp = Ext.getCmp(field.dateRange.end);  
  19.                         endDate = endDateCmp.getValue();  
  20.                     }  
  21.                 }  
  22.                 //如果开始日期或结束日期有一个为空则校验通过  
  23.                 if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){  
  24.                     validStatus =  beginDate <= endDate;  
  25.                 }  
  26.                   
  27.                 return validStatus;  
  28.             },  
  29.             //验证提示信息  
  30.             dateRangeText : '开始日期不能大于结束日期，请重新选择。'  
  31.         });  
  32.         Ext.QuickTips.init();//初始化提示;  
  33.         var dateForm = Ext.create('Ext.form.Panel',{  
  34.             title:'自定义日期范围验证示例',  
  35.             frame : true,  
  36.             width:250,  
  37.             renderTo: Ext.getBody(),  
  38.             bodyPadding: 5,  
  39.             fieldDefaults:{//统一设置表单字段默认属性  
  40.                 autoFitErrors : false,//不自动调整字段宽度  
  41.                 labelSeparator :'：',//分隔符  
  42.                 labelWidth : 90,//标签宽度  
  43.                 width : 210,//字段宽度  
  44.                 format:'Y年n月j日',//显示日期的格式  
  45.                 editable : false,//设置只读  
  46.                 allowBlank : false,//不允许为空  
  47.                 msgTarget : 'side'//设置提示信息展示位置  
  48.             },  
  49.             defaultType: 'datefield',//设置表单字段的默认类型  
  50.             items:[{  
  51.                 id:'beginDate1',  
  52.                 fieldLabel:'入学开始日期',  
  53.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange  
  54.                 vtype:'dateRange'  
  55.             },{  
  56.                 id:'endDate1',  
  57.                 fieldLabel:'入学结束日期',  
  58.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange  
  59.                 vtype:'dateRange'  
  60.             },{  
  61.                 id:'beginDate2',  
  62.                 fieldLabel:'毕业开始日期',  
  63.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange  
  64.                 vtype:'dateRange'  
  65.             },{  
  66.                 id:'endDate2',  
  67.                 fieldLabel:'毕业结束日期',  
  68.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange  
  69.                 vtype:'dateRange'  
  70.             }]  
  71.         });  

Ajax模式的表单数据加载： 
Html代码  ExtJS4学习札记二－－表单控件相关
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>Ajax模式的表单数据加载</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化提示;  
  11.         var productForm = Ext.create('Ext.form.Panel',{  
  12.             title:'表单加载示例',  
  13.             width : 300,  
  14.             frame : true,  
  15.             fieldDefaults:{//统一设置表单字段默认属性  
  16.                 labelSeparator :'：',//分隔符  
  17.                 labelWidth : 80,//标签宽度  
  18.                 width : 200  
  19.             },  
  20.             renderTo: Ext.getBody(),  
  21.             items:[{  
  22.                 fieldLabel:'产品名称',  
  23.                 xtype : 'textfield',  
  24.                 name : 'productName',  
  25.                 value:'U盘'//同步加载数据  
  26.             },{  
  27.                 fieldLabel:'金额',  
  28.                 xtype : 'numberfield',  
  29.                 name : 'price',  
  30.                 value : 100//同步加载数据  
  31.             },{  
  32.                 fieldLabel:'生产日期',  
  33.                 xtype : 'datefield',  
  34.                 format:'Y年m月d日',//显示日期的格式  
  35.                 name : 'date',  
  36.                 value : new Date()//同步加载数据  
  37.             },{  
  38.                 xtype : 'hidden',  
  39.                 name : 'productId',  
  40.                 value:'001'//产品id  
  41.             },{  
  42.                 fieldLabel:'产品简介',  
  43.                 name : 'introduction',  
  44.                 xtype : 'textarea'  
  45.             }],  
  46.             buttons:[{  
  47.                 text : '加载简介',  
  48.                 handler : loadIntroduction  
  49.             }]  
  50.         });  
  51.         //表单加载数据的回调函数  
  52.         function loadIntroduction(){  
  53.             var params = productForm.getForm().getValues();  
  54.             productForm.getForm().load({  
  55.                 params : params,//传递参数  
  56.                 url : 'productServer.jsp',//请求的url地址  
  57.                 method:'GET',//请求方式  
  58.                 success:function(form,action){//加载成功的处理函数  
  59.                     Ext.Msg.alert('提示','产品简介加载成功');  
  60.                 },  
  61.                 failure:function(form,action){//加载失败的处理函数  
  62.                     Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);  
  63.                 }  
  64.             });  
  65.         }  
  66.     });  
  67.   </script>  
  68.  </HEAD>  
  69.  <BODY STYLE="margin: 10px"></BODY>  
  70. </HTML>  
Jsp代码  ExtJS4学习札记二－－表单控件相关
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%  
  3. //获取产品id  
  4. String productId = request.getParameter("productId");  
  5. if("001".equals(productId)){  
  6.     String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";  
  7.     response.getWriter().write(msg);  
  8. }else{  
  9.     String msg = "{success:false,errorMessage:'数据不存在'}";  
  10.     response.getWriter().write(msg);  
  11. }  
  12. %>  


另外一种方式： 
Java代码  ExtJS4学习札记二－－表单控件相关
  1. public String getProductInfo(String productId)  
  2.     {  
  3.         String msg = "";  
  4.         if("001".equals(productId)){  
  5.             msg = "1本产品美观实用，售后服务优秀。";  
  6.         }else{  
  7.             msg = "0数据不存在";  
  8.         }  
  9.         return msg;  
  10.     }  

Javascript代码  ExtJS4学习札记二－－表单控件相关
  1. //表单加载数据的回调函数  
  2.         function loadIntroduction(){  
  3.             var params = productForm.getForm().getValues();  
  4.             testdwr.getProductInfo(params.productId,function(ret){  
  5.                 if(ret.substring(0,1) == '1')  
  6.                 {  
  7.                     Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));  
  8.                     Ext.Msg.alert('提示','产品简介加载成功');  
  9.                 }  
  10.                 else  
  11.                 {  
  12.                     Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));  
  13.                 }  
  14.             });  
  15.         }  

登录简单处理： 
Html代码  ExtJS4学习札记二－－表单控件相关
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>Ajax模式的表单数据提交</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化提示;  
  11.         var loginForm = Ext.create('Ext.form.Panel',{  
  12.             title:'表单提交示例',  
  13.             width : 230,  
  14.             frame : true,  
  15.             fieldDefaults:{//统一设置表单字段默认属性  
  16.                 labelSeparator :'：',//分隔符  
  17.                 labelWidth : 50,//标签宽度  
  18.                 msgTarget : 'side',  
  19.                 width : 200  
  20.             },  
  21.             renderTo: Ext.getBody(),  
  22.             bodyPadding: 5,  
  23.             defaultType: 'textfield',//设置表单字段的默认类型  
  24.             items:[{  
  25.                 fieldLabel:'用户名',  
  26.                 name : 'userName',  
  27.                 allowBlank : false,  
  28.                 vtype:'email'  
  29.             },{  
  30.                 fieldLabel:'密码',  
  31.                 name : 'password',  
  32.                 inputType : 'password',  
  33.                 allowBlank : false  
  34.             }],  
  35.             buttons:[{  
  36.                 text : '登陆',  
  37.                 handler : login  
  38.             },{  
  39.                 text : '重置',  
  40.                 handler : reset  
  41.             }]  
  42.         });  
  43.         function login(){//提交表单  
  44.             loginForm.getForm().submit({  
  45.                 clientValidation:true,//进行客户端验证  
  46.                 url : 'loginServer.jsp',//请求的url地址  
  47.                 method:'GET',//请求方式  
  48.                 success:function(form,action){//加载成功的处理函数  
  49.                     Ext.Msg.alert('提示','系统登陆成功');  
  50.                 },  
  51.                 failure:function(form,action){//加载失败的处理函数  
  52.                     Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);  
  53.                 }  
  54.             });  
  55.         }  
  56.         function reset(){//重置表单  
  57.             loginForm.form.reset();  
  58.         }  
  59.     });  
  60.   </script>  
  61.  </HEAD>  
  62.  <BODY  STYLE="margin: 10px"></BODY>  
  63. </HTML>  
Jsp代码  ExtJS4学习札记二－－表单控件相关
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%  
  3.     String password = request.getParameter("password");  
  4.     String msg = "";  
  5.     if(password.length() < 6){//密码不足6位验证失败  
  6.         msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";  
  7.     }else{//验证成功  
  8.         msg = "{success:true}";  
  9.     }  
  10.     response.getWriter().write(msg);  
  11. %>  

相关推荐