用Ext编写的用户登陆

来源:互联网 发布:鲁迪盖伊nba数据 编辑:程序博客网 时间:2024/06/09 14:33

LoginWindow.ui.js

LoginWindowUi = Ext.extend(Ext.Window, {
    title: '用户登陆',
    width: 300,
    height: 137,
    layout: 'fit',
    resizable: false,
    closable: false,
    modal: true,
    iconCls: 'userLoginWindowCls',
    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                width: 287,
                height: 73,
                frame: true,
                labelWidth: 50,
                monitorValid: true,
                id: 'userLoginForm',
                items: [
                    {
                        xtype: 'textfield',
                        fieldLabel: '用户名',
                        anchor: '100%',
                        allowBlank: false,
                        blankText: '用户名不能为空',
                        name: 'user.userName'
                    },
                    {
                        xtype: 'textfield',
                        fieldLabel: '密   码',
                        anchor: '100%',
                        inputType: 'password',
                        allowBlank: false,
                        blankText: '密码不能为空',
                        name: 'user.userPwd'
                    }
                ]
            }
        ];
        this.fbar = {
            xtype: 'toolbar',
            buttonAlign: 'center',
            items: [
                {
                    xtype: 'button',
                    text: '登陆',
                    id: 'loginButton'
                },
                {
                    xtype: 'button',
                    text: '重置',
                    id: 'resetButton'
                }
            ]
        };
        LoginWindowUi.superclass.initComponent.call(this);
    }
});

LoginWindow.js

 

function login(){
 Ext.getCmp('userLoginForm').form.submit({
  url:basePath+'/public/userLogin.science',
  waitMsg:'正在登录,请稍候!',
  waitTitle:'提示',
  success:function(form,action){
   window.location.href=basePath+'/public/userLoginSuccess.science';
  },
  failure:function(form,action){
   switch (action.failureType) {
             case Ext.form.Action.CONNECT_FAILURE:
              Ext.MessageBox.alert('错误', '通讯失败');
                 break;
             case Ext.form.Action.SERVER_INVALID:
              Ext.MessageBox.alert('错误', action.result.msg);
   }
  }
 });
}

LoginWindow = Ext.extend(LoginWindowUi, {
 keys:{
  key:Ext.EventObject.ENTER,
  shift:false,
  ctrl:false,
  alt:false,
  fn:function(){//按钮响应函数
   login();
  }
 },
    initComponent: function() {
        LoginWindow.superclass.initComponent.call(this);
        Ext.getCmp('loginButton').addListener('click',function(){
         login();
        });
        Ext.getCmp('resetButton').addListener('click',function(){
         Ext.getCmp('userLoginForm').form.reset();
        });
         Ext.getCmp('userLoginForm').addListener('clientvalidation',function(form,isValid){
         Ext.getCmp('loginButton').setDisabled(!isValid);
        });
    }
});

Ext.onReady(function(){
 Ext.QuickTips.init();
 var loginWindow = new LoginWindow({
   renderTo: Ext.getBody()
 });
 loginWindow.show();
});