Ext表单组件实现用户注册

最新推荐文章于 2018-02-26 16:32:10 发布
最新推荐文章于 2018-02-26 16:32:10 发布
阅读量156 收藏
点赞数
分类专栏： Extjs 文章标签： Extjs Ext javascript 正则表达式 Firefox ViewUI
先看一下总体的效果!
[img]http://lovebeyond.iteye.com/upload/attachment/132206/f6c2a0ad-ffcd-3fe2-867f-275f3000e0e2.gif[/img]
这个界面是我由[url]http://java-cn.com/members/register.jsp[/url]的注册表单转换成ExtJS实现!
这个表单基本上用到了ExtJS的所有组件,我先通过这个表单把EXT的Form组件功能呈现给大家，然后我会在接下来的文章中，针对每个组件进行具体的讲解!代码看上去会比较多,但实现很容易,目前还是针对界面部分,虽然表单中会设计到store方面的,但我都是用的本地模式实现,至于结合后台语言的话我会在grid和store那部分专门去讲解!
我分俩个文件(form.html和register.js)和一个图片文件夹,先看源码:

form.html: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<title>register.html</title>
		<style type="text/css">  
			body{background-color:#777777} 
			#form-ct{width: 700px;margin-left: auto;margin-right: auto;} 
		</style>  
		<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../Ext/ext-all.js"></script>
		<script type="text/javascript" src="register.js"></script>
	</head>
	<body>
			<div id="form-ct"></div>
	</body>
</html>



register.js 

Ext.apply(Ext.form.VTypes, {
			postNum:function(v) {
				return /^[1-9]\d{5}$/.test(v);
	    },
	    postNumText: '邮政编号必须为6位的数字,并且第一位不能为0',

			password : function(val, field) {
				if (field.initialPassField) {
					var pwd = Ext.getCmp(field.initialPassField);
					return (val == pwd.getValue());
				}
				return true;
			},
			passwordText : '倆次輸入的密碼不一致，請重新輸入',

			emailvalidator : function(val, field) {
				if (field.initialField) {
					var em = Ext.getCmp(field.initialField);
					return (val == em.getValue());
				}
				return true;
			},
			emailvalidatorText : '倆次輸入的郵箱地址不一致，請重新輸入'
		});

Ext.onReady(function() {
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'qtip';
	var imageDate = [['i01.jpg', 'images/i01.jpg'],
			['i02.jpg', 'images/i02.jpg'], ['i03.jpg', 'images/i03.jpg'],
			['i04.jpg', 'images/i04.jpg'], ['i05.jpg', 'images/i05.jpg'],
			['i06.jpg', 'images/i06.jpg'], ['i07.jpg', 'images/i07.jpg'],
			['i08.jpg', 'images/i08.jpg'], ['i09.jpg', 'images/i09.jpg'],
			['i10.jpg', 'images/i10.jpg']];
	var image_store = new Ext.data.SimpleStore({
				fields : ["image_name", "image_url"],
				data : imageDate
			});
	var proviceDate = [{pname:'江西',pvalue:'jiangxi'},{pname:'湖南',pvalue:'hunan'},
										 {pname:'湖北',pvalue:'hubei'},{pname:'安徽',pvalue:'anhui'},
										 {pname:'四川',pvalue:'sichuang'},{pname:'河北',pvalue:'hebei'},
										 {pname:'广东',pvalue:'guangdong'},{pname:'福建',pvalue:'fujian'},
										 {pname:'其他',pvalue:'others'}];
	var provice_store = new Ext.data.JsonStore({
		data :proviceDate,
		fields :[{name:'provice_name',mapping:'pname'},{name:'provice_value',mapping:'pvalue'}]
	})
	var industryDate = [{
				iname : '自由职业',
				ivalue : 'zyzy'
			}, {
				iname : '企业干部',
				ivalue : 'qygb'
			}, {
				iname : '政府官员',
				ivalue : 'zfgy'
			}, {
				iname : '公务员',
				ivalue : 'gwy'
			}, {
				iname : '工人',
				ivalue : 'gr'
			}, {
				iname : '农民',
				ivalue : 'nm'
			}, {
				iname : '主妇',
				ivalue : 'zf'
			}, {
				iname : '待业',
				ivalue : 'dy'
			}, {
				iname : '军人',
				ivalue : 'jr'
			}, {
				iname : '其他',
				ivalue : 'others'
			}];
	var industry_store = new Ext.data.JsonStore({
				data : industryDate,
				fields : [{
							name : 'industry_name',
							mapping : 'iname'
						}, {
							name : 'industry_value',
							mapping : 'ivalue'
						}]
			})
	var education_data = 
		[
			{education_value:"小学"},
			{education_value:"初中"}, 
			{education_value:'高中'}, 
			{education_value:'中專'}, 
			{education_value:'大專'},
			{education_value:'大學'}, 
			{education_value:'本科'}, 
			{education_value:'碩士'}, 
			{education_value:'博士'}
	];
	var education_store = new Ext.data.JsonStore({
		data:education_data,
		fields : [{name :'education_value',mapping : 'education_value'}]
	});
	var form = new Ext.FormPanel({
		title : '新会员注册',
		width : 700,
		autoHeight : true,
		renderTo : 'form-ct',
		bodyStyle : "padding:2px",
		border : false,
		frame : true,
		items : [{
			autoHeight : true,
			xtype : 'fieldset',
			title : '必填注册信息',
			items : [{// 用户名信息
				layout : 'column',
				defaults : {
					columnWidth : '.5'
				},
				items : [{
							layout : 'form',
							items : {
								fieldLabel : '用户名',
								xtype : 'textfield',
								name : 'userName',
								allowBlank : false,
								blankText : '用戶名不能為空',
								minLength : 4,
								minLengthText : '用戶名長度不得小於4個字符長度',
								maxLength : 20,
								maxLengthText : '用戶名的長度不得大於20個字符的長度',
								anchor : '95%'
							}
						}, {
							xtype : 'label',
							html : '<font color="red">*</font> 长度限制为4－20小写字母数字'
						}]
			}, {	// 密码信息
						layout : 'column',
						items : [{
									columnWidth : '.4',
									layout : 'form',
									items : {
										fieldLabel : '密码',
										xtype : 'textfield',
										inputType : 'password',
										allowBlank : false,
										blankText : '密碼不能為空',
										minLength : 6,
										minLengthText : '密碼長度不得小於6個字符長度',
										name : 'pass',
										id : 'pass',
										anchor : '95%'
									}
								}, {
									columnWidth : '.6',
									layout : 'form',
									xtype : 'label',
									html : '<font color="red">*</font> 至少6位，区分大小写'
								}]
					}, {// 重复密码信息
						layout : 'column',
						items : [{
									columnWidth : '.4',
									layout : 'form',
									items : {
										fieldLabel : '重复密码',
										xtype : 'textfield',
										name:'repass',
										inputType : 'password',
										anchor : '95%',
										vtype : 'password',
										initialPassField : 'pass'
									}
								}, {
									columnWidth : '.6',
									layout : 'form',
									xtype : 'label',
									html : '<font color="red">*</font> 至少6位，区分大小写，并且和初始密码一致'
								}]
					}, {// 邮箱信息
						layout : 'column',
						items : [{
									columnWidth : '.5',
									layout : 'form',
									items : {
										fieldLabel : '邮箱',
										xtype : 'textfield',
										allowBlank : false,
										blankText : 'email地址不能為空',
										vtype : 'email',
										emailText : '郵箱格式不匹配(user@domain.com)',
										name : 'email',
										id : 'email',
										anchor : '95%'
									}
								},{
									columnWidth : '.11',
									defaultType : 'checkbox',
									defaults : {
										layout : 'form'
									},
									items : {
										checked : true,
										boxLabel : '不公开',
										name : 'email_pub'
									}
								}, {
									columnWidth : '.05',
									layout : 'form',
									xtype : 'label',
									html : '<font color="red">*</font> '
								}]
					}, {// 确认邮箱信息
						layout : 'column',
						defaults : {
							layout : 'form',
							columnWidth : '.5'
						},
						items : [{
									items : {
										fieldLabel : '确认邮箱',
										xtype : 'textfield',
										name:'reemail',
										vtype : 'emailvalidator',
										initialField : 'email',
										anchor : '95%'
									}
								}, {
									xtype : 'label',
									html : '<font color="red">*</font>'
								}]
					}]
		}, new Ext.form.FieldSet({
			title : '高级用户设置选项信息',
			autoHeight : true,
			animCollapse :true,
			//collapsible : true,
			collapsed :true,
			checkboxToggle :true,
			items : [{
				layout : 'column',
				defaults : {
					layout : 'form',
					columnWidth : '.5'
				},
				items : [{
					items : {
						fieldLabel : '選擇頭像',
						xtype : 'combo',
						store : image_store,
						mode : 'local',
						emptyText : 'i01.jpg',//請選擇頭像
						forceSelection : true,
						selectOnFocus : true,
						triggerAction : 'all',
						typeAhead : true,
						valueField : 'image_url',
						displayField : 'image_name',
						anchor : '95%',
						name : 'imgUrl',
						listeners : {
							scope : this,
							change : function(e) {
								field = Ext.get('im');
								field.dom.src = e.value;
								e.blur;
							}
						}
					}
				}, {
					xtype : 'label',
					html : '<img id="im" src="images/i01.jpg" height=32 width=32 />'
				}]
			},{
				xtype :'textfield',
				name :'alias',
				fieldLabel :'昵称'
			},{
				layout : 'column',
				defaults : {
					layout : 'form',
					columnWidth : '.45'
				},
				items :[{
					items:{
						xtype :'textfield',
						name :'trueName',
						fieldLabel :'真实姓名'
					}
				},{
					xtype :'checkbox',
					checked : true,
					boxLabel : '不公开',
					name : 'trueName_pub'
				}]
			},{
				xtype: 'radiogroup',
        fieldLabel: '性别',
        anchor : '50%',
				items: [
          {boxLabel: '保密', name: 'sex',inputValue :1, checked: true},
          {boxLabel: '男', name: 'sex',inputValue :2},
          {boxLabel: '女', name: 'sex',inputValue :3}
        ]
			},{
				xtype :'combo',
				fieldLabel: '省份',
				store : provice_store,
				mode : 'local',
				emptyText : '江西',
				forceSelection : true,
				selectOnFocus : true,
				triggerAction : 'all',
				typeAhead : true,
				valueField : 'provice_value',
				displayField : 'provice_name',
				anchor : '45%',
				name : 'provice'
			},{
				xtype : 'combo',
				fieldLabel :'行業',
				store : industry_store,
				mode : 'local',
				emptyText : '自由職業',
				forceSelection : true,
				selectOnFocus : true,
				triggerAction : 'all',
				typeAhead : true,
				valueField : 'industry_value',
				displayField : 'industry_name',
				anchor : '45%',
				name : 'work'
			},{
				xtype : 'combo',
				fieldLabel :'最高學歷',
				store :education_store,
				mode : 'local',
				emptyText : '小學',
				forceSelection : true,
				selectOnFocus : true,
				triggerAction : 'all',
				typeAhead : true,
				valueField : 'education_value',
				displayField : 'education_value',
				anchor : '45%',
				name : 'education'
			},{
				xtype:'datefield',
				fieldLabel:'出生日期',
				name:'brithday',
				minValue:'01/01/1900',
				minText:'出生日期不得在1900年01月01日以前',
				maxValue:new Date(),
				maxText:'出生日期错误或者超出范围',
				anchor : '45%'
			},{
				xtype:'textfield',
				fieldLabel:'网站',
				name:'web_link',
				vtype:'url',
				urlText:'网站格式不正确'
			},{
				xtype:'textfield',
				fieldLabel:'邮编',
				name:'post',
				vtype:'postNum',//自定义验证规则
				anchor : '45%'
			},{
				xtype:'textarea',
				name:'sign',
				fieldLabel:'签名',
				anchor : '75%'
			},{
				xtype:'htmleditor',
				name:'introduction',
				fieldLabel:'个人介绍',
				height:200,
				anchor : '95%'
			}]
		})],
		buttons : [{
					text : '提交',
					scope:this,
					handler:function(){
						alert(Ext.encode(form.form.getValues()));
					}
				}, {
					text : '重置',
					handler:function(){
						form.form.reset();
					}
				}]
	})
})

上面代码涉及到的知识包括以下几个方面:
1.form组件的应用,包括有 Checkbox,ComboBox,DateField,FieldSet,HtmlEditor,Label,Radio,TextArea,TextField,FormPanel这些,其中没有用到的有 Hidden,NumberField,TimeField,TriggerField这几个,其中在表单中邮编那里其实可以用NumberField的,但涉及到验证我还是用了textfield并通过扩展Vtype实现数字和长度验证!
2.有用到布局管理,formlayout和columnlayout
3.Vtype验证规则,验证规则很简单,也很容易扩展,其中我有扩张邮编严整,俩次密码相等验证,只要你对正则表达式熟悉的话扩展很方便!
4.store,simplestore,jsonstore都有涉及到,但不是这里的重点
5.相关辅助函数的用法,如 getCmp

总结:熟悉API,特别是对于刚接触的来说尤为重要!英语不好就开着金山词霸一个翻译把,我是这么做的,不过也可以找中文的API文档如果英文实在太烂的话!


源码在下面,要的自己下载,我这里是完全能运行的，并且能完全兼容IE7.0和FF,其他浏览器我没有试过!注意编码问题,要是直接在IDE里面打开JS文件中文乱码的话,就先用记事本打开COPY过去就行!
beyond1993
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs注册热键的方法二
测试开发这些事
10-20 1165
方法以是在控件的属性中添加keys的属性，这个方法一般人都知道但是我在我自己小项目中发现这个方法不灵，经过验证采用以下第二套方法解决问题    Glb.login.name_passwd_column = new Ext.Panel({        title:,        layout:column,        bodyBorder:true,     
Ext的FormPanel组件
12-17
Ext的FormPanel组件说明formPanel的详细使用说明
ExtJS注册表单
子弹上膛，重拾理想
04-15 165
用户在注册时，需要填的表单太长，为此需显示滚动条，但注意有两个属性需要更改formPanel:autoHeight:false,height:100%,autoScroll : true,由于整个的form是放在fieldset中， 其默认的布局时靠左边的，可以通过columnlayout来控制设置左右两个item的itemwidth为.5 来使其居中，但也可采用下面的技巧labelWidt...
Ext中注册新用户
hongguanzh的专栏
05-14 121
function addStu(){ //初始化QuickTips实例。 Ext.QuickTips.init(); var stuname=new Ext.form.TextField({ msgTarget:'qtip', fieldLabel:'用户名', allo...
Ext表单组件之checkbox
03-16
NULL 博文链接：https://lovebeyond.iteye.com/blog/441009
Ext表单组件之textField
03-16
NULL 博文链接：https://lovebeyond.iteye.com/blog/440899
Ext 表单布局实例代码
09-06
ext下布局的实现代码。
EXT4.3实现动态表单全动态
05-01
实现页面grid页面全动态，希望对您有帮助，请帮顶！
Ext-JS表单提交初探（用户注册）
旋转木马的IT小窝
03-24 659
<br /> <br />经过两天的研究弄出了一个表单提交的例子，还是挺有成就感的~<br /> <br /> 
Ext.form各类控件的配置及方法
weixin_30340775的博客
10-23 126
1、Ext.form.Action 配置项： success：执行成功后回调的函数，包括两个参数：form和action failure：执行失败后回调的函数，包括两个参数：form和action method：表单的提交方式，有效值包括GET、POST params：传递到请求中的参...
Ext js 表单组件
Zhang_h_的博客
02-26 555
1.文本域：textfield { xtype: 'textfield', fieldLabel: 'Text field' } 2.文本区域：textarea { xtype: 'textarea', fieldLabel: 'Text Area' } 3.显示字段：displayfield { xtype: 'displayfie...
Ext常用组件
张晨光老师的播客
03-21 3692
表单是客户端和服务器交互的一种重要方式，Ext表单控件在界面体验效果的美观度及功能的全面性上都有着首屈一指的影响力，表面上，表单控件只是添加了一些 CSS样式，但它在数据校验方面非常灵活。实际上，Ext提供的功能远不止这些，它还可以使不同的消息对话框更加美观、容易配置、拖动等，这都是传统的页面方式无法比拟的。此外，Ext的树形结构是Ext框架的重要组成部分，可以动态添加、删除或修改节点，实现拖拽和
Extjs form 组件
06-07 187
Extjsform组件1、Ext.form.Action配置项：success：执行成功后回调的函数，包括两个参数：form和actionfailure：执行失败后回调的函数，包括两个参数：form和actionmethod：表单的提交方式，有效值包括GET、POSTparams：传递到请求中的...
Ext注册demo
07-19 291
Ext.onReady(function() { // 自定义密码验证 Ext.apply(Ext.form.VTypes, {      // val指这里的文本框值，field指这个文本框组件      password : function(val, field) {       if (field.confirmTo) {        var pwd = Ext.get(fi
注册IOS企业/公司开发者账号流程
u011140147的专栏
05-13 1917
摘要 注册IOS企业/公司开发者账号流程 IOS企业/公司开发者账号 注:不管在哪个步骤,只要是在apple开发者中心进行注册的,都必须要填写英文,绝对不能出现中文,否则你的注册将不会被通过 1.申请企业账号的地址. https://developer.apple.com/programs/ios/enterprise/ 2.点击apple now进
使用EXTJS写的注册窗口
无若
07-27 1703
<!--Ext.onReady(function(){var form = new Ext.form.FormPanel({ defaultType: textfield, labelAlign: right, title: form, labelWidth: 50, frame: true,
(Ext基础篇) 表单与输入控件
zhouzhiwengang的专栏
08-25 1342
FormPanel和BasicForm详解                                        我们制作一个Ext.form.FormPanel，然后在里面设置field。顾名思议，FormPanel是Ext.Panel的一个子类，可以对其执行各种Panel操作。实际上，表单的功能是在Ext.form.BasicPanel 中实现的，在获得FormPanel之后，随时都
Ext.js表单展示怎么写
最新发布
05-13
在 Ext.js 中，可以使用 `Ext.form.Panel` 来展示表单。以下是一个简单的示例： ```javascript Ext.create('Ext.form.Panel', { title: 'My Form Panel', width: 300, bodyPadding: 10, renderTo: Ext.getBody...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值