MyNote笔记系统（二）登陆与注册

工程源码：http://download.csdn.net/detail/my_session/4846364

页面主要代码：

（登陆    login.js）

Ext.onReady(function() {
    //提示
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'side'; 
	
	  var simple = new Ext.FormPanel({
        labelWidth: '75', // label settings here cascade unless overridden
        frame:true,
        title: "笔记之家",
        bodyStyle:'padding:50px 10px 10px 10px',     
        //height:'100%',
        //width: '100%',
        //defaults: {width: '100%'},
        defaultType: 'textfield',
		standardSubmit: true, //重点,有了它就可以subMit
        items: [{
                fieldLabel: '用户名',
                name: 'user.name',
                allowBlank:false,
                value:'马锦涛',               
                blankText:'请输入用户名!'
            },{
                fieldLabel: '密码',
                name: 'user.password',
                allowBlank:false,
                inputType: 'password',    //密码
                value:'majintao',           
                blankText:'请输入密码!'
            }
        ],
    		  buttons: [{   
                                        text: '登陆',   
                                        type: 'submit',   
                                        //定义表单提交事件   
                                        handler:function(){   
                        if(simple.form.isValid()){//验证合法后使用加载进度条   
                                    Ext.MessageBox.show({   
                                 title: '请稍等',   
                                 msg: '正在加载...', 
                                 progressText: '',   
                                 width:300,   
                                 progress:true,   
                                 closable:false,   
                                 animEl: 'loding' 
                                });   
                                //控制进度速度   
                              var f = function(v){   
                           return function(){   
                               var i = v/11;   
                                Ext.MessageBox.updateProgress(i, '');   
                                  };   
                                };   

                           for(var i = 1; i < 13; i++){   
                             setTimeout(f(i), i*150);   
                              }   
                                     
                               //提交到服务器操作   
                              simple.form.doAction('submit',{   
                              url:'login.action?',
                              method:'post',//提交方法post或get   
                              params:'',   
                              //提交成功的回调函数   
                             success:function(form,action){   
                               if (action.result.msg=='ok') {   
                               //Ext.Msg.alert('提示窗口','提交已成功！');
                              document.location='users/personal.jsp';   
                               
                              
                             } else {   
                                Ext.Msg.alert('登陆错误',action.result.msg);   
                               }   
                               },   
                            //提交失败的回调函数   
                             failure:function(){ 
                              Ext.Msg.alert('错误','服务器出现错误请稍后再试！');   
                                 }   
                               });   
                              }                                                                                  
                                        }   
                                },{   
                                        text: '取消',   
                                        handler:function(){
                                        window.hide();
                                        }
                                },{   
                                    text: '注册',   
                                    handler:function(){
                                    regwindow.show();
                                    }
    }
                              
                                ]
    });
	
    var window = new Ext.Window({
        title: '登录',
        x:'37%',
        y:'38%',
        width: '350',
        height:'350',
        closable:false,
        resizable:false,      
        bodyStyle:'padding:5px;',
        buttonAlign:'center',
        items: simple,
        draggable: false,
        shadow:false  
        
    });


    window.show();
});

注册  regform.js

	Ext.QuickTips.init();											//支持tips提示
　　Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)
　　																					//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不介绍了，可自行验证
　　																					//大家可以分别去掉这两行代码，看效果就会明白他们的作用，（放在onReady的function（）{}中）
  	Ext.apply(Ext.form.VTypes,{
　　	password:function(val,field)
          {               						//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
　　       	if(field.confirmTo)
                 {              //confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
　　               var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值
　　               return (val==pwd.getValue());
　　              }
　　              return true;
　　        }
　　});

    var f = new Ext.form.FormPanel({
        title : '填写信息',
        width : 450,
        height : 250,
        bodyStyle : 'padding:20px',
        labelAlign : 'right',
        frame : true,
        items : [
            new Ext.form.TextField({
                name : 'username',
                allowBlank : false,
                blankText : "不能为空，请填写",
                //regex: /^\w+$/, 
                //regexText:"用户名只能由字母和数字组成！", 
                minLength : 2,
                minLengthText : "长度不能小于2个字符",
                maxLength : 15,              
                maxLengthText : "长度超过了15个字符",
                fieldLabel : '用户名',
                width:180
            }),
              {
                name : 'password1',
                id:"pass1",
                xtype : 'textfield',
                inputType : 'password',
                fieldLabel : '密码',
                allowBlank : false,
                blankText : "不能为空，请填写",
                width:180
            },
            {
                name : 'password2',
                id:"pass2",
                xtype : 'textfield',
                inputType : 'password',
                fieldLabel : '确认密码',
                allowBlank : false,
                 blankText : "不能为空，请填写",
                vtype:"password",//自定义的验证类型
                vtypeText:"两次密码不一致！",
　　            confirmTo:"pass1",//要比较的另外一个的组件的id
                width:180
            },
            {
                name : 'email',
                xtype : 'textfield',
                fieldLabel : '邮箱',
                allowBlank : false,
                blankText : "不能为空，请填写",
                vtype:"email",//email格式验证
　　            vtypeText:"不是有效的邮箱地址",
                width:180
            },
            {
                name : 'qq',
                xtype : 'textfield',
                fieldLabel : 'QQ',
                allowBlank : false,
                blankText : "不能为空，请填写",
                width:180
            }
              
        ],
        buttons : [{
            text : '注册',
            handler : function () {
                var username = f.getForm().findField('username').getValue();
                var password = f.getForm().findField('password1').getValue();
                var email = f.getForm().findField('email').getValue();
                var qq = f.getForm().findField('qq').getValue();
                Ext.Ajax.request({
                    	url : 'reg.action',
            		success: function(resp,opts) { 
            			var respText = Ext.util.JSON.decode(resp.responseText); 
                    	var msg = respText.msg;
                        if('ok' == msg) {
                            Ext.MessageBox.alert('提示', '注册成功');
                            regwindow.close();
                        }
                		
                    },
                    failure : function () {
                        Ext.MessageBox.alert('错误', '连接服务器错误！');
                    },
                    method : 'post',
                    params : {name : username, password : password,mailbox : email,qq : qq}
                });
            }
        },{
            text : '重置',
            handler : function () {
                f.getForm().reset();
            }
        }]
    })
    
    
    var regwindow=new Ext.Window({
          title: "笔记之家用户注册", 
          //closable:false,
          modal:true,//桌面阴影
                frame:true,  
                height:280,  
               width:450,
               draggable: false,
               items:[f]
    })