`
hnhnhnhnhn
  • 浏览: 77145 次
社区版块
存档分类
最新评论

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

Extjs4 
阅读更多
二、表单部分相关 
<HTML>
 <HEAD>
  <TITLE>提示信息</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();//初始化信息提示功能
		var form = new Ext.form.Panel({
			title:'表单',//表单标题
			height:120,//表单高度
			width:200,//表单宽度
			frame:true,//是否渲染表单
			renderTo :'form',
			defaults:{//统一设置表单字段默认属性
				//autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
				labelSeparator :'：',//分隔符
				labelWidth : 50,//标签宽度
				width : 150,//字段宽度
				allowBlank : false,//是否允许为空
				blankText : '不允许为空',
				labelAlign : 'left',//标签对齐方式
				msgTarget :'qtip'          //显示一个浮动的提示信息
				//msgTarget :'title'       //显示一个浏览器原始的浮动提示信息
				//msgTarget :'under'       //在字段下方显示一个提示信息
				//msgTarget :'side'        //在字段的右边显示一个提示信息
				//msgTarget :'none'        //不显示提示信息
				//msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息
			},
			items:[{
				xtype : 'textfield',
				fieldLabel : '姓名'//标签内容
			},{
				xtype : 'numberfield',
				fieldLabel : '年龄'
			}]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px">
 	<div id='form'></div>
 	<!-- 错误信息展示元素 -->
 	<div id='errorMsg'></div>
 </BODY>
</HTML>


<div id='form'></div>

Ext.QuickTips.init();
		var loginForm = Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Text示例',
			bodyStyle:'padding:5 5 5 5',//表单边距
			frame : true,
			height:120,
			width:200,
			renderTo :'form',
			defaultType: 'textfield',//设置表单字段的默认类型
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 50,//标签宽度
				width : 150,//字段宽度
				allowBlank : false,//是否允许为空
				labelAlign : 'left',//标签对齐方式
				msgTarget :'side'   //在字段的右边显示一个提示信息
			},
			items:[{
					fieldLabel : '用户名',
					name : 'userName',
					selectOnFocus : true,//得到焦点时自动选择文本
					//验证电子邮件格式的正则表达式
					regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
					regexText:'格式错误'//验证错误之后的提示信息,
				},{
					name : 'password',
					fieldLabel : '密码',
					inputType : 'password'//设置输入类型为password
				}
			],
			buttons:[{
				text : '登陆',
				handler : function(){
					loginForm.form.setValues({userName:'user@com',password:'123456'});
				}
			}]
		});


Ext.QuickTips.init();
		var testForm = Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.TextArea示例',
			bodyStyle:'padding:5 5 5 5',//表单边距
			frame : true,
			height:150,
			width:250,
			renderTo :'form',  //<div id='form'></div>
			items:[{
				xtype : 'textarea',
				fieldLabel : '备注',
				id:'memo',//字段组件id
				labelSeparator :'：',//分隔符
				labelWidth : 60,//标签宽度
				width:200
			}],
			buttons:[{text:'确定',handler:showValue}]
		})
		function showValue(){
			var memo = testForm.getForm().findField('memo');//取得输入控件
			alert(memo.getValue());//取得控件值
		}

//Ext.form.field.Number示例
		Ext.QuickTips.init();
		var form = Ext.create('Ext.form.FormPanel',{
			title:'Ext.form.field.Number示例',
			bodyStyle:'padding:5 5 5 5',//表单边距
			renderTo :'form',	//<div id='form'></div>
			frame : true,
			height:150,
			width:250,
			defaultType: 'numberfield',//设置表单字段的默认类型
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 80,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left',//标签对齐方式
				msgTarget :'side'   //在字段的右边显示一个提示信息
			},
			items:[{
				fieldLabel:'整数',
				hideTrigger : true,//隐藏微调按钮
				allowDecimals : false,//不允许输入小数
				nanText :'请输入有效的整数'//无效数字提示
			},{
				fieldLabel:'小数',
				decimalPrecision : 2,//精确到小数点后两位
				allowDecimals : true,//允许输入小数
				nanText :'请输入有效的小数'//无效数字提示
			},{
				fieldLabel:'数字限制',
				baseChars :'12345'//输入数字范围
			},{
				fieldLabel:'数值限制',
				maxValue : 100,//最大值
				minValue : 50//最小值
			}]
		});

触发字段： 
//Ext.form.field.Trigger示例
		var testForm = Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Trigger示例',
			bodyStyle:'padding:5 5 5 5',//表单边距
			frame : true,
			height:100,
			width:270,
			renderTo :'form',
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:[{
				xtype : 'triggerfield',
				id:'memo',
				fieldLabel:'触发字段',
				hideTrigger : false,//不隐藏触发按钮
				onTriggerClick : function(){
					var memo = testForm.getForm().findField('memo');//取得输入控件
					alert(memo.getValue());//取得控件值
					Ext.getCmp('memo').setValue('test');
				}
			}]
		});

微调字段 
//Ext.form.field.Spinner示例
		Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Spinner示例',
			bodyStyle:'padding:5 5 5 5',//表单边距
			frame : true,
			height:70,
			width:250,
			renderTo :'form',
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:[{
				xtype : 'spinnerfield',
				fieldLabel:'微调字段',
				id : 'salary',//组件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本地数据源示例 
//Ext.form.field.ComboBox本地数据源示例
		//创建数据模型
		Ext.regModel('PostInfo', {
		    fields: [{name: 'province'},{name: 'post'}]
		});
		//定义组合框中显示的数据源
		var postStore = Ext.create('Ext.data.Store',{
			model : 'PostInfo',
			data : [
				{province:'北京',post:'100000'},
				{province:'通县',post:'101100'},
				{province:'昌平',post:'102200'},
				{province:'大兴',post:'102600'},
				{province:'密云',post:'101500'},
				{province:'延庆',post:'102100'},
				{province:'顺义',post:'101300'},
				{province:'怀柔',post:'101400'}
			]
		});
		//创建表单
		Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.ComboBox本地数据源示例',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			frame : true,
			height:100,
			width:270,
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:[{
				xtype : 'combo',
				listConfig : {
					emptyText : '未找到匹配值',//当值不在列表是的提示信息
					maxHeight : 60//设置下拉列表的最大高度为60像素
				},
				name:'post',
				autoSelect : true,
				fieldLabel:'邮政编码',
				triggerAction: 'all',//单击触发按钮显示全部数据
				store : postStore,//设置数据源
				displayField:'province',//定义要显示的字段
				valueField:'post',//定义值字段
				queryMode: 'local',//本地模式
				forceSelection : true,//要求输入值必须在列表中存在
				typeAhead : true,//允许自动选择匹配的剩余部分文本
				value:'102600'//默认选择大兴
			}]
		});

Ext.form.field.Time示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Time示例',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			frame : true,
			height:100,
			width:300,
			items:[{
				fieldLabel:'时间选择框',
				xtype : 'timefield',
				width : 220,
				labelSeparator :'：',//分隔符
				msgTarget :'side',//在字段的右边显示一个提示信息
				autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
				maxValue : '18:00',//最大时间
				maxText : '时间应小于{0}',//大于最大时间的提示信息
				minValue : '10:00',//最小时间
				minText : '时间应大于{0}',//小于最小时间的提示信息
				pickerMaxHeight : 70,//下拉列表的最大高度
				increment : 60,//时间间隔为60分钟
				format : 'G时i分s秒 ',//G标示为24时计时法
				invalidText :'时间格式无效'
			}]
		});

Ext.form.field.Date示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Time示例',
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			frame : true,
			height:100,
			width:300,
			items:[{
				fieldLabel:'时间选择框',
				xtype : 'timefield',
				width : 220,
				labelSeparator :'：',//分隔符
				msgTarget :'side',//在字段的右边显示一个提示信息
				autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度
				maxValue : '18:00',//最大时间
				maxText : '时间应小于{0}',//大于最大时间的提示信息
				minValue : '10:00',//最小时间
				minText : '时间应大于{0}',//小于最小时间的提示信息
				pickerMaxHeight : 70,//下拉列表的最大高度
				increment : 60,//时间间隔为60分钟
				format : 'G时i分s秒 ',//G标示为24时计时法
				invalidText :'时间格式无效'
			}]
		});

Ext.form.field.Hidden示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Hidden示例',
			frame : true,
			height:100,
			width:300,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaultType: 'textfield',//设置表单字段的默认类型
			defaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 70,//标签宽度
				width : 200,//字段宽度
				labelAlign : 'left'//标签对齐方式
			},
			items:[{
				name:'userName',
				fieldLabel:'姓名'
			},{//隐藏域
				name:'age',
				xtype : 'hidden'
			},{
				name:'sex',
				fieldLabel:'性别'
			}]
		});

Ext.form.field.HtmlEditor示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.HtmlEditor示例',
			width : 630,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			items:[{
				fieldLabel:'HTML字段',
				xtype : 'htmleditor',
				height:150,
				width : 600,
				value : 'ExtJS4登场',
				labelWidth : 70,//标签宽度
				labelSeparator :'：',//分隔符
				createLinkText : '创建超链接',//创建连接的提示信息
				defaultLinkValue : "http://www.",//连接的默认格式
				enableAlignments : true,//起用左、中、右对齐按钮
				enableColors : true,//起用前景色、背景色选择按钮
				enableFont : true,//起用字体选择按钮
				enableFontSize : true,//起用字体增大和缩写按钮
				enableFormat : true,//起用粗体、斜体、下划线按钮
				enableLinks : true,//起用创建连接按钮
				enableLists : true,//起用列表按钮
				enableSourceEdit : true,//起用源代码编辑按钮
				fontFamilies:['宋体','隶书','黑体'],//字体列表
				buttonTips :{
					bold : {
						title: 'Bold (Ctrl+B)',
						text: '粗体'
					},
					italic : {
						title: 'Italic (Ctrl+I)',
						text: '斜体'
					},
					underline : {
						title: 'Underline (Ctrl+U)',
						text: '下划线'
					},
					increasefontsize : {
						title: 'Grow Text',
						text: '增大字体'
					},
					decreasefontsize : {
						title: 'Shrink Text',
						text: '缩小字体'
					},
					backcolor : {
						title: 'Text Highlight Color',
						text: '背景色'
					},
					forecolor : {
						title: 'Font Color',
						text: '前景色'
					},
					justifyleft : {
						title: 'Align Text Left',
						text: '左对齐'
					},
					justifycenter : {
						title: 'Center Text',
						text: '居中对齐'
					},
					justifyright : {
						title: 'Align Text Right',
						text: '右对齐'
					},
					insertunorderedlist : {
						title: 'Bullet List',
						text: '项目符号'
					},
					insertorderedlist : {
						title: 'Numbered List',
						text: '数字编号'
					},
					createlink : {
						title: 'Hyperlink',
						text: '超连接'
					},
					sourceedit : {
						title: 'Source Edit',
						text: '切换源代码编辑模式'
					}
				}
			}]
		});

Ext.form.field.Display示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Display示例',
			width : 200,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			items:[{
				fieldLabel:'展示字段',
				xtype : 'displayfield',
				value : '<b>ExtJS4登场</b>',
				labelWidth : 70,//标签宽度
				labelSeparator :'：'//分隔符
			}]
		});

Ext.form.Label示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.Label示例',
			width : 200,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			items:[ {
		        xtype: 'label',
		        forId: 'userName',//关联inputId为userName的表单字段
		        text: '用户名'
		    },{
				name:'userName',
				xtype : 'textfield',
				inputId : 'userName',
				hideLabel : true //隐藏字段标签
			}]
		});

Ext.form.FieldSet示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.FieldSet示例',
			labelWidth : 40,//标签宽度
			width : 220,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			items:[{
				title:'产品信息',
				xtype : 'fieldset',
				collapsible : true,//显示切换展开收缩状态的切换按钮
				bodyPadding: 5,
				defaults:{//统一设置表单字段默认属性
					labelSeparator :'：',//分隔符
					labelWidth : 50,//标签宽度
					width : 160//字段宽度
				},
				defaultType: 'textfield',//设置表单字段的默认类型
				items:[{
					fieldLabel:'产地'
				},{
					fieldLabel:'售价'
				}]
			},{
				title:'产品描述',
				xtype : 'fieldset',
				bodyPadding: 5,
				checkboxToggle : true,//显示切换展开收缩状态的复选框
				checkboxName : 'description',//提交数据时复选框对应的name
				labelSeparator :'：',//分隔符
				items:[{
					fieldLabel:'简介',
					labelSeparator :'：',//分隔符
					labelWidth : 50,//标签宽度
					width : 160,//字段宽度
					xtype : 'textarea'
				}]
			}]
		});

Ext.form.FieldContainer示例： 
Ext.create('Ext.form.Panel',{
			title:'Ext.form.FieldContainer示例',
			width : 300,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			fieldDefaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 60,//标签宽度
				width : 260,//字段宽度
				msgTarget : 'side'
			},
			defaultType: 'textfield',//设置表单字段的默认类型
			items:[{
				fieldLabel:'商品名称'
			},{
		        xtype: 'fieldcontainer',
		        fieldLabel: '生产日期',
		        layout: {//设置容器字段布局
		            type: 'hbox',
		            align: 'middle'//垂直居中
		        },
		        combineErrors : true,//合并展示错误信息
		        fieldDefaults: {
                    hideLabel: true,//隐藏字段标签
                    allowBlank : false//设置字段值不允许为空
                },
                defaultType: 'textfield',//设置表单字段的默认类型
		        items: [{
		            fieldLabel: '年',
		            flex: 1,
		            inputId : 'yearId'
		        },{
                    xtype: 'label',
                    forId : 'yearId',
                    text: '年'
                },{
		            fieldLabel: '月',
		            flex: 1,
		            inputId : 'monthId'
		        },{
                    xtype: 'label',
                    forId : 'monthId',
                    text: '月'
                },{
		            fieldLabel: '日',
		            flex: 1,
		            inputId : 'dayId'
		        },{
                    xtype: 'label',
                    forId : 'dayId',
                    text: '日'
                }]
		    },{
				fieldLabel:'产地来源'
			}]
		});

vtype示例： 
Ext.create('Ext.form.Panel',{
			title:'vtype示例',
			width : 300,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaultType: 'textfield',//设置表单字段的默认类型
			fieldDefaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 80,//标签宽度
				width : 270,//字段宽度
				msgTarget : 'side'
			},
			items:[{
				fieldLabel:'电子邮件',
				vtype:'email'
			},{
				fieldLabel:'网址',
				vtype:'url'
			},{
				fieldLabel:'字母',
				vtype:'alpha'
			},{
				fieldLabel:'字母和数字',
				vtype:'alphanum'
			}]
		});

自定义电话号码验证示例： 
//自定义电话号码的vtype验证
		Ext.apply(Ext.form.field.VTypes, {
		    phone:  function(v) {
		    	//规则区号（3-4位数字）-电话号码（7-8位数字）
		        return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);
		    },
		    phoneText: '请输入有效的电话号码',
		    phoneMask: /[\d-]/i//只允许输入数字和-号
		});
		Ext.QuickTips.init();
		Ext.create('Ext.form.Panel',{
			title:'自定义电话号码验证示例',
			width : 300,
			frame : true,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaultType: 'textfield',//设置表单字段的默认类型
			fieldDefaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 80,//标签宽度
				width : 270,//字段宽度
				msgTarget : 'side'
			},
			items:[{
				fieldLabel:'住宅号码',
				vtype:'phone'//使用电话类型验证
			},{
				fieldLabel:'办公号码',
				vtype:'phone'//使用电话类型验证
			}]
		});

自定义日期范围验证示例： 
//自定义VType类型，验证日期选择范围
		Ext.apply(Ext.form.field.VTypes, {
			//验证方法
			dateRange : function(val, field) {
				var beginDate = null,//开始日期
					beginDateCmp = null,//开始日期组件
					endDate = null,//结束日期
					endDateCmp = null,//结束日期组件
					validStatus = true;//验证状态
				if(field.dateRange){
					//获取开始时间
					if(!Ext.isEmpty(field.dateRange.begin)){
						beginDateCmp = Ext.getCmp(field.dateRange.begin);
						beginDate = beginDateCmp.getValue();
					}
					//获取结束时间
					if(!Ext.isEmpty(field.dateRange.end)){
						endDateCmp = Ext.getCmp(field.dateRange.end);
						endDate = endDateCmp.getValue();
					}
				}
				//如果开始日期或结束日期有一个为空则校验通过
				if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){
					validStatus =  beginDate <= endDate;
				}
				
				return validStatus;
			},
			//验证提示信息
			dateRangeText : '开始日期不能大于结束日期，请重新选择。'
		});
		Ext.QuickTips.init();//初始化提示;
		var dateForm = Ext.create('Ext.form.Panel',{
			title:'自定义日期范围验证示例',
			frame : true,
			width:250,
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			fieldDefaults:{//统一设置表单字段默认属性
				autoFitErrors : false,//不自动调整字段宽度
				labelSeparator :'：',//分隔符
				labelWidth : 90,//标签宽度
				width : 210,//字段宽度
				format:'Y年n月j日',//显示日期的格式
				editable : false,//设置只读
				allowBlank : false,//不允许为空
				msgTarget : 'side'//设置提示信息展示位置
			},
			defaultType: 'datefield',//设置表单字段的默认类型
			items:[{
				id:'beginDate1',
				fieldLabel:'入学开始日期',
				dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型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模式的表单数据加载： 
<HTML>
 <HEAD>
  <TITLE>Ajax模式的表单数据加载</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
  <script type="text/javascript" src="extjs4/bootstrap.js"></script>
  <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();//初始化提示;
		var productForm = Ext.create('Ext.form.Panel',{
			title:'表单加载示例',
			width : 300,
			frame : true,
			fieldDefaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 80,//标签宽度
				width : 200
			},
			renderTo: Ext.getBody(),
			items:[{
				fieldLabel:'产品名称',
				xtype : 'textfield',
				name : 'productName',
				value:'U盘'//同步加载数据
			},{
				fieldLabel:'金额',
				xtype : 'numberfield',
				name : 'price',
				value : 100//同步加载数据
			},{
				fieldLabel:'生产日期',
				xtype : 'datefield',
				format:'Y年m月d日',//显示日期的格式
				name : 'date',
				value : new Date()//同步加载数据
			},{
				xtype : 'hidden',
				name : 'productId',
				value:'001'//产品id
			},{
				fieldLabel:'产品简介',
				name : 'introduction',
				xtype : 'textarea'
			}],
			buttons:[{
				text : '加载简介',
				handler : loadIntroduction
			}]
		});
		//表单加载数据的回调函数
		function loadIntroduction(){
			var params = productForm.getForm().getValues();
			productForm.getForm().load({
				params : params,//传递参数
				url : 'productServer.jsp',//请求的url地址
				method:'GET',//请求方式
				success:function(form,action){//加载成功的处理函数
					Ext.Msg.alert('提示','产品简介加载成功');
				},
				failure:function(form,action){//加载失败的处理函数
					Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+action.result.errorMessage);
				}
			});
		}
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
//获取产品id
String productId = request.getParameter("productId");
if("001".equals(productId)){
	String msg = "{success:true,data:{introduction:'本产品美观实用，售后服务优秀。'}}";
	response.getWriter().write(msg);
}else{
	String msg = "{success:false,errorMessage:'数据不存在'}";
	response.getWriter().write(msg);
}
%>


另外一种方式： 
public String getProductInfo(String productId)
	{
		String msg = "";
		if("001".equals(productId)){
			msg = "1本产品美观实用，售后服务优秀。";
		}else{
			msg = "0数据不存在";
		}
		return msg;
	}

//表单加载数据的回调函数
		function loadIntroduction(){
			var params = productForm.getForm().getValues();
			testdwr.getProductInfo(params.productId,function(ret){
				if(ret.substring(0,1) == '1')
				{
					Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));
					Ext.Msg.alert('提示','产品简介加载成功');
				}
				else
				{
					Ext.Msg.alert('提示','产品简介加载失败<br>失败原因：'+ret.substring(1,ret.length-1));
				}
			});
		}

登录简单处理： 
<HTML>
 <HEAD>
  <TITLE>Ajax模式的表单数据提交</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
  <script type="text/javascript" src="extjs4/bootstrap.js"></script>
  <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		Ext.QuickTips.init();//初始化提示;
		var loginForm = Ext.create('Ext.form.Panel',{
			title:'表单提交示例',
			width : 230,
			frame : true,
			fieldDefaults:{//统一设置表单字段默认属性
				labelSeparator :'：',//分隔符
				labelWidth : 50,//标签宽度
				msgTarget : 'side',
				width : 200
			},
			renderTo: Ext.getBody(),
			bodyPadding: 5,
			defaultType: 'textfield',//设置表单字段的默认类型
			items:[{
				fieldLabel:'用户名',
				name : 'userName',
				allowBlank : false,
				vtype:'email'
			},{
				fieldLabel:'密码',
				name : 'password',
				inputType : 'password',
				allowBlank : false
			}],
			buttons:[{
				text : '登陆',
				handler : login
			},{
				text : '重置',
				handler : reset
			}]
		});
		function login(){//提交表单
			loginForm.getForm().submit({
				clientValidation:true,//进行客户端验证
				url : 'loginServer.jsp',//请求的url地址
				method:'GET',//请求方式
				success:function(form,action){//加载成功的处理函数
					Ext.Msg.alert('提示','系统登陆成功');
				},
				failure:function(form,action){//加载失败的处理函数
					Ext.Msg.alert('提示','系统登陆失败，原因：'+action.failureType);
				}
			});
		}
		function reset(){//重置表单
			loginForm.form.reset();
		}
	});
  </script>
 </HEAD>
 <BODY  STYLE="margin: 10px"></BODY>
</HTML>

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	String password = request.getParameter("password");
	String msg = "";
	if(password.length() < 6){//密码不足6位验证失败
		msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";
	}else{//验证成功
		msg = "{success:true}";
	}
	response.getWriter().write(msg);
%>
分享到：
| ExtJs4学习笔记一－－基础知识
评论
4 楼 binjoo 2012-07-13  
有password类型的文本框??
3 楼 yin_jw 2011-11-07  
当前日期为某月31号时（只有这一天），点击日期控件选择年月界面，双击9，没有进入9月的页面
2 楼 yin_jw 2011-11-07  
自定义日期范围验证示例  有一个bug
1 楼 yin_jw 2011-10-25  
 
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍，但这里我们主要关注学习笔记中的关键知识点。 首先，EXTJS的目录结构非常重要，因为它包含了所有必要的资源和源码： 1. `adapter`：这部分包含了适配器，用于将...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架，专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    ExtJs + api + 笔记 + 完整包

    "28-表单FormPanel控件的使用.doc"讲述了ExtJs中的表单组件，包括创建表单、添加字段、验证用户输入以及提交数据等操作。表单组件在数据收集和用户交互中扮演着重要角色。 最后，"ext-3.4.1"可能是一个包含ExtJs...

    extjs学习网页学习资料

    EXTJS的组件涵盖数据视图、布局管理、拖放操作、图表统计以及高级表单控件等，几乎能够满足各种Web应用的需求。它独特的数据绑定机制使得用户界面可以更加直观地反映数据状态的变化。 学习EXTJS首先应当从其官方...

    extjs批量上传的所有相关代码和jar，支持包和笔记

    EXTJS是一种基于JavaScript的富客户端应用框架，广泛用于构建企业级..."批量上传"这个压缩包可能包含了实现这一功能所需的全部代码、样式、支持文件及开发者的经验总结，对于学习和理解EXTJS批量上传机制非常有帮助。

    Extjs学习笔记之二 初识Extjs之Form

    Extjs中的表单组件是Ext.form.BasicForm，不过最简单最常用的是Ext.form.FormPanel控件，它继承自Panel，具有一定的界面显示控制能力，它其中包含着一个BasicForm对象，用来执行向服务器提交，加载等动作。Extjs也对...

    ExtJS使用笔记

    在学习和使用ExtJS的过程中，我们需要了解其基础构成，如何引用库文件，以及如何通过各种控件实现丰富的交互效果。 首先，要开始使用ExtJS，必须了解其构成及如何引用。ExtJS由几个关键部分组成，包括Ext Core...

    AnyFo - ExtJS 移魂大法.doc

    通过学习这份笔记，开发者可以深入了解ExtJS的架构，提高开发效率，打造出功能丰富且用户体验优秀的Web应用程序。 总之，《AnyFo - ExtJS 移魂大法》是一份详尽的ExtJS实战指南，无论对于新手还是有经验的开发者，...

    Extjs学习笔记之三 extjs form更多的表单项

    本篇笔记将深入探讨一些超越普通HTML表单的ExtJS表单项，这些组件提供了更丰富的功能和更好的用户体验。 首先，我们来看日期选择框（DateField）。在日常开发中，日期输入是一个常见的需求，ExtJS的DateField组件...

    java 学习笔记

    Java学习笔记主要涵盖Java编程语言的基础知识、工具的使用以及框架的应用。在本文中，我们将深入探讨Java开发环境的配置，特别是与Eclipse和MyEclipse集成的ExtJS开发插件，以及ExtJS框架的一些常见操作和问题解决。...

    Ext 学习总结 pdf版

    - **ExtJs2.0学习笔记(事件注册总结篇)**：总结了Ext JS 2.0中事件处理的相关知识，包括事件监听、触发等。 - **ExtJs2.0学习笔记(Ext.Panel篇一/二/三/四)**：这一系列内容分别讲述了`Ext.Panel`的不同方面，如...

    入门基础学习 ExtJS笔记（一）

    本文将基于标题“入门基础学习 ExtJS笔记（一）”和描述，介绍ExtJS的基础知识，特别是如何创建一个基本的界面框架。 首先，要使用ExtJS，我们需要引入必要的CSS样式表和JavaScript库。在HTML文件中，我们看到引用...

    javascrip上百技术总集

    -(4) JavaScript面向对象的支持--(5) JavaScript面向对象的支持--(6) JavaScript精简学习1：基础知识 JavaScript精简学习2：浏览器输出 JavaScript精简学习3：图像 JavaScript精简学习4：表单 ...

    ext经典资料学习—201012

    13. **extJs 2.0 学习笔记**：这部分笔记涵盖了EXTJS 2.0版本的主要特性，包括Ajax的使用、数据管理基础、Panel的深入理解等，帮助开发者掌握EXTJS的基本用法。 EXTJS的学习是一个不断深入的过程，从基础组件到高级...

    Ext 资料snow

    1. **ExtJS控件列表**：在ExtJS中，控件是构建用户界面的基本元素，包括按钮、文本框、面板、表单、网格、树等。`extjs控件列表.doc`可能提供了ExtJS中各种控件的详细介绍，包括它们的功能、用法以及配置选项，帮助...

    EXT_JS实用开发指南_个人整理笔记.docx

    - **控件（widgets）**：提供各种可视化组件，如面板、表格、树、窗口等，它们构建在底层API之上，位于`widgets`子目录中。 - **实用工具（Utils）**：包含各种便利的工具函数，如数据格式化、JSON处理、日期管理...

Magicbox
Global site tag (gtag.js) - Google Analytics