首页 > 代码库 > Extjs4表单（转 出处：http://www.cnblogs.com/luluping/archive/2011/11/09/2243763.html）

Extjs4表单（转 出处：http://www.cnblogs.com/luluping/archive/2011/11/09/2243763.html）

2024-07-31 17:17:52   218人阅读

  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=http://www.mamicode.com/"http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src=http://www.mamicode.com/"http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src=http://www.mamicode.com/"http://www.cnblogs.com/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> <HEAD>  <TITLE>提示信息</TITLE>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/ext-4.0/resources/css/ext-all.css" />  <script type="text/javascript" src="http://www.cnblogs.com/ext-4.0/bootstrap.js"></script>  <script type="text/javascript" src="http://www.cnblogs.com/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>

 

  1. <div id=‘form‘></div>  
<div id=‘form‘></div>

 

  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.         });  
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‘});				}			}]		});

 

  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.         }  
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‘,//字段组件id				labelSeparator :‘：‘,//分隔符				labelWidth : 60,//标签宽度				width:200			}],			buttons:[{text:‘确定‘,handler:showValue}]		})		function showValue(){			var memo = testForm.getForm().findField(‘memo‘);//取得输入控件			alert(memo.getValue());//取得控件值		}

 

  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.         });  
//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//最小值			}]		});


触发字段：

  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.         });  
//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‘);				}			}]		});


微调字段

  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.         });  
//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‘,//组件id				value : 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本地数据源示例

  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.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示例：

  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.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示例：

  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.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示例：

  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.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示例：

  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.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示例：

  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.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示例：

  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.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示例：

  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.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‘,//提交数据时复选框对应的name				labelSeparator :‘：‘,//分隔符				items:[{					fieldLabel:‘简介‘,					labelSeparator :‘：‘,//分隔符					labelWidth : 50,//标签宽度					width : 160,//字段宽度					xtype : ‘textarea‘				}]			}]		});


Ext.form.FieldContainer示例：

  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.         });  
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示例：

  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.         });  
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‘			}]		});


自定义电话号码验证示例：

  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.         });  
//自定义电话号码的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‘//使用电话类型验证			}]		});


自定义日期范围验证示例：

  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.         });  
//自定义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类型dateRange				vtype:‘dateRange‘			},{				id:‘endDate1‘,				fieldLabel:‘入学结束日期‘,				dateRange:{begin:‘beginDate1‘,end:‘endDate1‘},//用于vtype类型dateRange				vtype:‘dateRange‘			},{				id:‘beginDate2‘,				fieldLabel:‘毕业开始日期‘,				dateRange:{begin:‘beginDate2‘,end:‘endDate2‘},//用于vtype类型dateRange				vtype:‘dateRange‘			},{				id:‘endDate2‘,				fieldLabel:‘毕业结束日期‘,				dateRange:{begin:‘beginDate2‘,end:‘endDate2‘},//用于vtype类型dateRange				vtype:‘dateRange‘			}]		});


Ajax模式的表单数据加载：

  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=http://www.mamicode.com/"extjs4/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src=http://www.mamicode.com/"extjs4/bootstrap.js"></script>  
  7.   <script type="text/javascript" src=http://www.mamicode.com/"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>  
<HTML> <HEAD>  <TITLE>Ajax模式的表单数据加载</TITLE>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/extjs4/resources/css/ext-all.css" />  <script type="text/javascript" src="http://www.mamicode.com/extjs4/bootstrap.js"></script>  <script type="text/javascript" src="http://www.mamicode.com/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>
  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. %>  
<%@ 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);}%>



另外一种方式：

  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.     }  
public String getProductInfo(String productId)	{		String msg = "";		if("001".equals(productId)){			msg = "1本产品美观实用，售后服务优秀。";		}else{			msg = "0数据不存在";		}		return msg;	}

 

  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.         }  
//表单加载数据的回调函数		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));				}			});		}


登录简单处理：

  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=http://www.mamicode.com/"extjs4/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src=http://www.mamicode.com/"extjs4/bootstrap.js"></script>  
  7.   <script type="text/javascript" src=http://www.mamicode.com/"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>  
<HTML> <HEAD>  <TITLE>Ajax模式的表单数据提交</TITLE>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/extjs4/resources/css/ext-all.css" />  <script type="text/javascript" src="http://www.mamicode.com/extjs4/bootstrap.js"></script>  <script type="text/javascript" src="http://www.mamicode.com/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>
  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. %> 

Extjs4表单（转 出处：http://www.cnblogs.com/luluping/archive/2011/11/09/2243763.html）


联系
我们