Ext注册demo

Ext.onReady(function() {
// 自定义密码验证
Ext.apply(Ext.form.VTypes, {
     // val指这里的文本框值，field指这个文本框组件
     password : function(val, field) {
      if (field.confirmTo) {
       var pwd = Ext.get(field.confirmTo);
       return (val == pwd.getValue());
      }
      return true;
     }
    });
var quesStore = new Ext.data.SimpleStore({
     fields : ['question'],
     data : [['你父亲的名字'], ['你宠物的名字'], ['你母亲的名字'], ['你的英文名称'],
       ['你的家乡地址']]
    });
Ext.QuickTips.init();
// 注册表单开始
var regForm = new Ext.form.FormPanel({
   monitorValid : true,// 把有formBind:true的按钮和验证绑定
   frame : true,
   width : 300,
   labelSeparator : ':',
   baseCls : 'x-plain',
   labelWidth : 60,
   defaults : {
    anchor : '80%',
    allowBlank : false
   },
   items : [{
    fieldLabel : '用户名',
    name : 'users.username',
    id : 'userName',
    xtype : 'textfield',
    blankText : '用户名不能为空',
    emptyText : '请输入用户名',
    regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/,
    regexText : '用户名不合法(必须以字母开头,长度6-12位)!',// 验证错误之后的提示信息
    invalidText : '',
    anchor : '80%',
    validationEvent : 'blur',
    validator : function(thisText) {
     var loginNameEl = this;// 得到本身的textField
     Ext.Ajax.request({
        url : 'user.do?operate=doCheckUser&username='
          + thisText,
        method : 'post',
        success : function(response, options) {
         var result = Ext.util.JSON
           .decode(response.responseText);
         if (result.success == true) {
          loginNameEl
            .markInvalid("该登录名已经被他人使用，请重新输入其他登录名！");
          return false;
         }
        },
        failure : function(response, options) {
         return true;
         Ext.MessageBox.alert('友情提示', "异步通讯失败，请于管理员联系！");
        }
       });
     return true;
    }
   }, {
    fieldLabel : '密码',
    xtype : 'textfield',
    name : 'users.password',
    id : 'password',
    blankText : '密码不能为空',
    inputType : 'password',
    anchor : '80%'
   }, {
    fieldLabel : '确认密码',
    xtype : 'textfield',
    name : 'rePassWord',
    id : 'rePassWord',
    blankText : '确认密码不能为空',
    inputType : 'password',
    vtype : 'password',// 自定义的验证类型
    vtypeText : '两次密码不一致',
    confirmTo : 'passWord',// 要比较的另外一个的组件的id
    anchor : '80%'
   }, new Ext.form.ComboBox({
      name : 'users.question',
      id : 'question',
      fieldLabel : '请选择密码问题',
      blankText : '密码问题不能为空',
      triggerAction : 'all',
      emptyText : '请选择',
      store : quesStore,
      displayField : 'question',
      valueField : 'question',
      selectOnFocus:true,
      mode : 'local',
      forceSelection : true,
      typeAhead : true
     }), {
    fieldLabel : '密码问题答案',
    xtype : 'textfield',
    name : 'users.answer',
    id : 'answer',
    emptyText : '请输入密码问题',
    blankText : '密码问题不能为空',
    anchor : '80%'
   }, {
    fieldLabel : '邮箱',
    xtype : 'textfield',
    name : 'users.email',
    id : 'email',
    blankText : '邮箱不能为空',
    emptyText : '请输入E-mail(电子邮箱)',
    // vtype:'email',
    // vtypeText:'请输入正确的邮箱地址',
    regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
    regexText : '电子邮件格式错误!',// 验证错误之后的提示信息
    anchor : '80%'
   }, {
    fieldLabel : '移动电话',
    xtype : 'textfield',
    name : 'users.mobile',
    id : 'mobile',
    anchor : '80%',
    regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,
    regexText : '移动电话号码格式输入错误!',
    allowBlank : true,
    anchor : '80%'

   }, {
    fieldLabel : '毕业院校',
    name : 'users.school',
    id : 'school',
    xtype : 'textfield',
    allowBlank : true,
    anchor : '80%'
   }, {
    xtype : 'datefield',
    fieldLabel : '出生日期',
    name : 'bornDate',
    id : 'borndate',
    emptyText : '请选择出生日期',
    blankText : '出生日期不能为空',
    format : 'Y-m-d',
    readOnly : true
   }, {
    fieldLabel : '籍贯',
    name : 'users.hometown',
    id : 'hometown',
    xtype : 'textfield',
    allowBlank : true,
    anchor : '80%'
   }, {
    xtype : 'panel',
    baseCls : 'x-plain',
    layout : 'column',
    items : [{
       columnWidth : .6,
       layout : 'form',
       baseCls : 'x-plain',
       items : [{
          name : 'validateCode',
          xtype : 'textfield',
          baseCls : 'x-plain',
          plain : true,
          fieldLabel : '验证码',
          regex : /^[0-9]{4}$/,
          regexText : '图片不清楚吗？请点击图片进行刷新，验证码为4位数字!',
          width : 70,
          allowBlank : false,
          blankText : '验证码不能为空!'
         }]
      }, {
       columnWidth : .4,
       baseCls : 'x-plain',
       plain : true,
       scripts : true,
       html : '<img id="photo" src="codeServlet" οnclick="changeImg(this);" alt="看不清?换一张"/><A href="#" style="font-size:12px,valign:middle">看不清</A>'
      }]
   }

   ],
   buttons : [{
    text : '注册',
    type : 'submit',
    formBind : true,
    handler : function() {
     // 如果表单数据无效则返回
     if (!regForm.getForm().isValid()) {
      return;
     }
     regForm.getForm().submit({
        url : "user.do?operate=doAddUser",
        method : 'post',
        success : function(response, options) {
         if (options.result.success) {
          Ext.Msg.alert("提示", "&nbsp;&nbsp;"+options.result.msg+"&nbsp;&nbsp;",
            function() {
             regForm.getForm().reset();
            });
         }
        },
        failure : function(response, options) {
         Ext.Msg.alert('错误', "&nbsp;"+options.result.msg+"&nbsp;");
        }
       })

    }
   }, {
    text : '重置',
    handler : function() {
     regForm.getForm().reset();
    }
   }]
});// 注册表单结束
var regWindow = new Ext.Window({
     title : '用户注册',
     width : 300,
     shadowOffset : -4,
     closeAction : 'hide',
     floating : true,
     bodyStyle : 'padding: 4 2 2 2',
     shadow : true,
     animCollapse : true,
     closable : false,
     draggable : false,
     plain : true,
     resizable : false,
     items : [regForm]
    });
regWindow.show();
});

效果图如下: