用户注册-ExtJs表单组件实现


这个表单基本上用到了ExtJS的所有组件,我先通过这个表单把EXT的Form组件功能呈现给大家,然后我会在接下来的文章中,针对每个组件进行具体的讲解!代码看上去会比较多,但实现很容易,目前还是针对界面部分,虽然表单中会设计到store方面的,但我都是用的本地模式实现,至于结合后台语言的话我会在grid和store那部分专门去讲解!
我分俩个文件(form.html和register.js)和一个图片文件夹,先看源码:

form.html:
 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  2. <html>  
  3.     <head>  
  4.         <title>register.html</title>  
  5.         <style type="text/css">     
  6.             body{background-color:#777777}    
  7.             #form-ct{width: 700px;margin-left: auto;margin-right: auto;}    
  8.         </style>     
  9.         <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />  
  10.         <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>  
  11.         <script type="text/javascript" src="../Ext/ext-all.js"></script>  
  12.         <script type="text/javascript" src="register.js"></script>  
  13.     </head>  
  14.     <body>  
  15.             <div id="form-ct"></div>  
  16.     </body>  
  17. </html>  

register.js

Java代码
  1. Ext.apply(Ext.form.VTypes, {   
  2.             postNum:function(v) {   
  3.                 return /^[1-9]\d{5}$/.test(v);   
  4.         },   
  5.         postNumText: '邮政编号必须为6位的数字,并且第一位不能为0',   
  6.   
  7.             password : function(val, field) {   
  8.                 if (field.initialPassField) {   
  9.                     var pwd = Ext.getCmp(field.initialPassField);   
  10.                     return (val == pwd.getValue());   
  11.                 }   
  12.                 return true;   
  13.             },   
  14.             passwordText : '倆次輸入的密碼不一致,請重新輸入',   
  15.   
  16.             emailvalidator : function(val, field) {   
  17.                 if (field.initialField) {   
  18.                     var em = Ext.getCmp(field.initialField);   
  19.                     return (val == em.getValue());   
  20.                 }   
  21.                 return true;   
  22.             },   
  23.             emailvalidatorText : '倆次輸入的郵箱地址不一致,請重新輸入'  
  24.         });   
  25.   
  26. Ext.onReady(function() {   
  27.     Ext.QuickTips.init();   
  28.     Ext.form.Field.prototype.msgTarget = 'qtip';   
  29.     var imageDate = [['i01.jpg''images/i01.jpg'],   
  30.             ['i02.jpg''images/i02.jpg'], ['i03.jpg''images/i03.jpg'],   
  31.             ['i04.jpg''images/i04.jpg'], ['i05.jpg''images/i05.jpg'],   
  32.             ['i06.jpg''images/i06.jpg'], ['i07.jpg''images/i07.jpg'],   
  33.             ['i08.jpg''images/i08.jpg'], ['i09.jpg''images/i09.jpg'],   
  34.             ['i10.jpg''images/i10.jpg']];   
  35.     var image_store = new Ext.data.SimpleStore({   
  36.                 fields : ["image_name""image_url"],   
  37.                 data : imageDate   
  38.             });   
  39.     var proviceDate = [{pname:'江西',pvalue:'jiangxi'},{pname:'湖南',pvalue:'hunan'},   
  40.                                          {pname:'湖北',pvalue:'hubei'},{pname:'安徽',pvalue:'anhui'},   
  41.                                          {pname:'四川',pvalue:'sichuang'},{pname:'河北',pvalue:'hebei'},   
  42.                                          {pname:'广东',pvalue:'guangdong'},{pname:'福建',pvalue:'fujian'},   
  43.                                          {pname:'其他',pvalue:'others'}];   
  44.     var provice_store = new Ext.data.JsonStore({   
  45.         data :proviceDate,   
  46.         fields :[{name:'provice_name',mapping:'pname'},{name:'provice_value',mapping:'pvalue'}]   
  47.     })   
  48.     var industryDate = [{   
  49.                 iname : '自由职业',   
  50.                 ivalue : 'zyzy'  
  51.             }, {   
  52.                 iname : '企业干部',   
  53.                 ivalue : 'qygb'  
  54.             }, {   
  55.                 iname : '政府官员',   
  56.                 ivalue : 'zfgy'  
  57.             }, {   
  58.                 iname : '公务员',   
  59.                 ivalue : 'gwy'  
  60.             }, {   
  61.                 iname : '工人',   
  62.                 ivalue : 'gr'  
  63.             }, {   
  64.                 iname : '农民',   
  65.                 ivalue : 'nm'  
  66.             }, {   
  67.                 iname : '主妇',   
  68.                 ivalue : 'zf'  
  69.             }, {   
  70.                 iname : '待业',   
  71.                 ivalue : 'dy'  
  72.             }, {   
  73.                 iname : '军人',   
  74.                 ivalue : 'jr'  
  75.             }, {   
  76.                 iname : '其他',   
  77.                 ivalue : 'others'  
  78.             }];   
  79.     var industry_store = new Ext.data.JsonStore({   
  80.                 data : industryDate,   
  81.                 fields : [{   
  82.                             name : 'industry_name',   
  83.                             mapping : 'iname'  
  84.                         }, {   
  85.                             name : 'industry_value',   
  86.                             mapping : 'ivalue'  
  87.                         }]   
  88.             })   
  89.     var education_data =    
  90.         [   
  91.             {education_value:"小学"},   
  92.             {education_value:"初中"},    
  93.             {education_value:'高中'},    
  94.             {education_value:'中專'},    
  95.             {education_value:'大專'},   
  96.             {education_value:'大學'},    
  97.             {education_value:'本科'},    
  98.             {education_value:'碩士'},    
  99.             {education_value:'博士'}   
  100.     ];   
  101.     var education_store = new Ext.data.JsonStore({   
  102.         data:education_data,   
  103.         fields : [{name :'education_value',mapping : 'education_value'}]   
  104.     });   
  105.     var form = new Ext.FormPanel({   
  106.         title : '新会员注册',   
  107.         width : 700,   
  108.         autoHeight : true,   
  109.         renderTo : 'form-ct',   
  110.         bodyStyle : "padding:2px",   
  111.         border : false,   
  112.         frame : true,   
  113.         items : [{   
  114.             autoHeight : true,   
  115.             xtype : 'fieldset',   
  116.             title : '必填注册信息',   
  117.             items : [{// 用户名信息   
  118.                 layout : 'column',   
  119.                 defaults : {   
  120.                     columnWidth : '.5'  
  121.                 },   
  122.                 items : [{   
  123.                             layout : 'form',   
  124.                             items : {   
  125.                                 fieldLabel : '用户名',   
  126.                                 xtype : 'textfield',   
  127.                                 name : 'userName',   
  128.                                 allowBlank : false,   
  129.                                 blankText : '用戶名不能為空',   
  130.                                 minLength : 4,   
  131.                                 minLengthText : '用戶名長度不得小於4個字符長度',   
  132.                                 maxLength : 20,   
  133.                                 maxLengthText : '用戶名的長度不得大於20個字符的長度',   
  134.                                 anchor : '95%'  
  135.                             }   
  136.                         }, {   
  137.                             xtype : 'label',   
  138.                             html : '<font color="red">*</font> 长度限制为4-20小写字母数字'  
  139.                         }]   
  140.             }, {    // 密码信息   
  141.                         layout : 'column',   
  142.                         items : [{   
  143.                                     columnWidth : '.4',   
  144.                                     layout : 'form',   
  145.                                     items : {   
  146.                                         fieldLabel : '密码',   
  147.                                         xtype : 'textfield',   
  148.                                         inputType : 'password',   
  149.                                         allowBlank : false,   
  150.                                         blankText : '密碼不能為空',   
  151.                                         minLength : 6,   
  152.                                         minLengthText : '密碼長度不得小於6個字符長度',   
  153.                                         name : 'pass',   
  154.                                         id : 'pass',   
  155.                                         anchor : '95%'  
  156.                                     }   
  157.                                 }, {   
  158.                                     columnWidth : '.6',   
  159.                                     layout : 'form',   
  160.                                     xtype : 'label',   
  161.                                     html : '<font color="red">*</font> 至少6位,区分大小写'  
  162.                                 }]   
  163.                     }, {// 重复密码信息   
  164.                         layout : 'column',   
  165.                         items : [{   
  166.                                     columnWidth : '.4',   
  167.                                     layout : 'form',   
  168.                                     items : {   
  169.                                         fieldLabel : '重复密码',   
  170.                                         xtype : 'textfield',   
  171.                                         name:'repass',   
  172.                                         inputType : 'password',   
  173.                                         anchor : '95%',   
  174.                                         vtype : 'password',   
  175.                                         initialPassField : 'pass'  
  176.                                     }   
  177.                                 }, {   
  178.                                     columnWidth : '.6',   
  179.                                     layout : 'form',   
  180.                                     xtype : 'label',   
  181.                                     html : '<font color="red">*</font> 至少6位,区分大小写,并且和初始密码一致'  
  182.                                 }]   
  183.                     }, {// 邮箱信息   
  184.                         layout : 'column',   
  185.                         items : [{   
  186.                                     columnWidth : '.5',   
  187.                                     layout : 'form',   
  188.                                     items : {   
  189.                                         fieldLabel : '邮箱',   
  190.                                         xtype : 'textfield',   
  191.                                         allowBlank : false,   
  192.                                         blankText : 'email地址不能為空',   
  193.                                         vtype : 'email',   
  194.                                         emailText : '郵箱格式不匹配(user@domain.com)',   
  195.                                         name : 'email',   
  196.                                         id : 'email',   
  197.                                         anchor : '95%'  
  198.                                     }   
  199.                                 },{   
  200.                                     columnWidth : '.11',   
  201.                                     defaultType : 'checkbox',   
  202.                                     defaults : {   
  203.                                         layout : 'form'  
  204.                                     },   
  205.                                     items : {   
  206.                                         checked : true,   
  207.                                         boxLabel : '不公开',   
  208.                                         name : 'email_pub'  
  209.                                     }   
  210.                                 }, {   
  211.                                     columnWidth : '.05',   
  212.                                     layout : 'form',   
  213.                                     xtype : 'label',   
  214.                                     html : '<font color="red">*</font> '  
  215.                                 }]   
  216.                     }, {// 确认邮箱信息   
  217.                         layout : 'column',   
  218.                         defaults : {   
  219.                             layout : 'form',   
  220.                             columnWidth : '.5'  
  221.                         },   
  222.                         items : [{   
  223.                                     items : {   
  224.                                         fieldLabel : '确认邮箱',   
  225.                                         xtype : 'textfield',   
  226.                                         name:'reemail',   
  227.                                         vtype : 'emailvalidator',   
  228.                                         initialField : 'email',   
  229.                                         anchor : '95%'  
  230.                                     }   
  231.                                 }, {   
  232.                                     xtype : 'label',   
  233.                                     html : '<font color="red">*</font>'  
  234.                                 }]   
  235.                     }]   
  236.         }, new Ext.form.FieldSet({   
  237.             title : '高级用户设置选项信息',   
  238.             autoHeight : true,   
  239.             animCollapse :true,   
  240.             //collapsible : true,   
  241.             collapsed :true,   
  242.             checkboxToggle :true,   
  243.             items : [{   
  244.                 layout : 'column',   
  245.                 defaults : {   
  246.                     layout : 'form',   
  247.                     columnWidth : '.5'  
  248.                 },   
  249.                 items : [{   
  250.                     items : {   
  251.                         fieldLabel : '選擇頭像',   
  252.                         xtype : 'combo',   
  253.                         store : image_store,   
  254.                         mode : 'local',   
  255.                         emptyText : 'i01.jpg',//請選擇頭像   
  256.                         forceSelection : true,   
  257.                         selectOnFocus : true,   
  258.                         triggerAction : 'all',   
  259.                         typeAhead : true,   
  260.                         valueField : 'image_url',   
  261.                         displayField : 'image_name',   
  262.                         anchor : '95%',   
  263.                         name : 'imgUrl',   
  264.                         listeners : {   
  265.                             scope : this,   
  266.                             change : function(e) {   
  267.                                 field = Ext.get('im');   
  268.                                 field.dom.src = e.value;   
  269.                                 e.blur;   
  270.                             }   
  271.                         }   
  272.                     }   
  273.                 }, {   
  274.                     xtype : 'label',   
  275.                     html : '<img id="im" src="images/i01.jpg" height=32 width=32 />'  
  276.                 }]   
  277.             },{   
  278.                 xtype :'textfield',   
  279.                 name :'alias',   
  280.                 fieldLabel :'昵称'  
  281.             },{   
  282.                 layout : 'column',   
  283.                 defaults : {   
  284.                     layout : 'form',   
  285.                     columnWidth : '.45'  
  286.                 },   
  287.                 items :[{   
  288.                     items:{   
  289.                         xtype :'textfield',   
  290.                         name :'trueName',   
  291.                         fieldLabel :'真实姓名'  
  292.                     }   
  293.                 },{   
  294.                     xtype :'checkbox',   
  295.                     checked : true,   
  296.                     boxLabel : '不公开',   
  297.                     name : 'trueName_pub'  
  298.                 }]   
  299.             },{   
  300.                 xtype: 'radiogroup',   
  301.         fieldLabel: '性别',   
  302.         anchor : '50%',   
  303.                 items: [   
  304.           {boxLabel: '保密', name: 'sex',inputValue :1, checked: true},   
  305.           {boxLabel: '男', name: 'sex',inputValue :2},   
  306.           {boxLabel: '女', name: 'sex',inputValue :3}   
  307.         ]   
  308.             },{   
  309.                 xtype :'combo',   
  310.                 fieldLabel: '省份',   
  311.                 store : provice_store,   
  312.                 mode : 'local',   
  313.                 emptyText : '江西',   
  314.                 forceSelection : true,   
  315.                 selectOnFocus : true,   
  316.                 triggerAction : 'all',   
  317.                 typeAhead : true,   
  318.                 valueField : 'provice_value',   
  319.                 displayField : 'provice_name',   
  320.                 anchor : '45%',   
  321.                 name : 'provice'  
  322.             },{   
  323.                 xtype : 'combo',   
  324.                 fieldLabel :'行業',   
  325.                 store : industry_store,   
  326.                 mode : 'local',   
  327.                 emptyText : '自由職業',   
  328.                 forceSelection : true,   
  329.                 selectOnFocus : true,   
  330.                 triggerAction : 'all',   
  331.                 typeAhead : true,   
  332.                 valueField : 'industry_value',   
  333.                 displayField : 'industry_name',   
  334.                 anchor : '45%',   
  335.                 name : 'work'  
  336.             },{   
  337.                 xtype : 'combo',   
  338.                 fieldLabel :'最高學歷',   
  339.                 store :education_store,   
  340.                 mode : 'local',   
  341.                 emptyText : '小學',   
  342.                 forceSelection : true,   
  343.                 selectOnFocus : true,   
  344.                 triggerAction : 'all',   
  345.                 typeAhead : true,   
  346.                 valueField : 'education_value',   
  347.                 displayField : 'education_value',   
  348.                 anchor : '45%',   
  349.                 name : 'education'  
  350.             },{   
  351.                 xtype:'datefield',   
  352.                 fieldLabel:'出生日期',   
  353.                 name:'brithday',   
  354.                 minValue:'01/01/1900',   
  355.                 minText:'出生日期不得在1900年01月01日以前',   
  356.                 maxValue:new Date(),   
  357.                 maxText:'出生日期错误或者超出范围',   
  358.                 anchor : '45%'  
  359.             },{   
  360.                 xtype:'textfield',   
  361.                 fieldLabel:'网站',   
  362.                 name:'web_link',   
  363.                 vtype:'url',   
  364.                 urlText:'网站格式不正确'  
  365.             },{   
  366.                 xtype:'textfield',   
  367.                 fieldLabel:'邮编',   
  368.                 name:'post',   
  369.                 vtype:'postNum',//自定义验证规则   
  370.                 anchor : '45%'  
  371.             },{   
  372.                 xtype:'textarea',   
  373.                 name:'sign',   
  374.                 fieldLabel:'签名',   
  375.                 anchor : '75%'  
  376.             },{   
  377.                 xtype:'htmleditor',   
  378.                 name:'introduction',   
  379.                 fieldLabel:'个人介绍',   
  380.                 height:200,   
  381.                 anchor : '95%'  
  382.             }]   
  383.         })],   
  384.         buttons : [{   
  385.                     text : '提交',   
  386.                     scope:this,   
  387.                     handler:function(){   
  388.                         alert(Ext.encode(form.form.getValues()));   
  389.                     }   
  390.                 }, {   
  391.                     text : '重置',   
  392.                     handler:function(){   
  393.                         form.form.reset();   
  394.                     }   
  395.                 }]   
  396.     })   
  397. })  

上面代码涉及到的知识包括以下几个方面:
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过去就行!

点击下载此文件

 



[本日志由 风一样的男孩 于 2009-10-07 01:14 PM 编辑]
文章来自: javaeye
引用通告: 查看所有引用 | 我要引用此文章
Tags: ExtJS 组件 form组件
相关日志:
评论: 1 | 引用: 0 | 查看次数: -
回复回复shink[2010-06-16 12:43 AM | del]
你根本没有提交。如果提交到后台的话还是可能出现乱码
回复来自 风一样的男孩 的评论 风一样的男孩 于 2010-06-19 01:24 PM 回复
这个是不会有乱码的。我已经试过了的。提交前进行编码处理。
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.