当前位置:编程学习 > JS >>

ExtJs4 用户登录窗口

//用户登录窗口

function getLoginWindow(){
 var loginWindow = Ext.WindowMgr.get('loginWindow');
 if(!loginWindow){
  loginWindow = Ext.create('Ext.window.Window', {
   id:'loginWindow',
   title:'登陆窗口',
   height: 160,
      width: 350,
      plain:true,
         resizable:false,
         closable:false,
         draggable:false,
      buttonAlign:'center',
      modal: true,
      plain:true,
      layout:'fit',
   items:[{
    xtype:'form',
    id:'userLoginForm',
    frame: true,
    monitorValid:true,
    bodyPadding: 10,
       bodyPadding: '10 5 0',
    fieldDefaults:{
     labelAlign:'right',
     labelWidth:70,
     msgTarget: 'side'
    },
    items:[{
     xtype:'textfield',
     name:'userLoginForm.userName',
     fieldLabel:'用户名',
     margins: '20 20 20 20',
     width:250,
     emptyText:'请输入用户名',
     allowBlank:false,
                    blankText:'用户名不能为空'
    },{
     xtype:'textfield',
     fieldLabel:'密   码',
     name:'userLoginForm.userPwd',
                 margins: '20 20 20 20',
     width:250,
     inputType:'password',
     emptyText:'请输入密码',
                    allowBlank:false,
                    blankText:'密码不能为空'
    }],
    listeners:{
      actioncomplete:function(formPanel,action){
       location.href=basePath+'/success/loginSuccess.action';
      },
      actionfailed:function(formPanel,action){
       if(action.result){
        Ext.Msg.show({
          title:'登陆',
          msg:action.result.msg,
          buttons:Ext.Msg.OK,
          closable:false,
          fn:function(btn){},
          icon:Ext.MessageBox.QUESTION
       });
       }else {
        alert(action.response.responseText);
       }
      }
    }
   }],
   buttons:[{
    text:'登录',
    id:'loginBtn',
    width:80,
                height:30,
                listeners:{
     click:function(){
      login();
     }
    }
   },{
    text:'重置',
    width:80,
                height:30,
    formBind: true,
    listeners:{
     click:function(btn,even,opt){
      Ext.getCmp('userLoginForm').form.reset();
     }
    }
   }],
   listeners : {
    render: function(input) {
     new Ext.KeyMap(input.getEl(), [{
      key : Ext.EventObject.ENTER,
      fn : function(){
       login();
      }
     }]);
    }
     }
  });
 }
 return loginWindow;
}

//保存方法

function login(){
 var userLoginForm = Ext.getCmp('userLoginForm').getForm();
  if(userLoginForm.isValid()){
   userLoginForm.submit({
    url:basePath+'/public/userLogin.action',
    waitTitle:'登陆',
    waitMsg:'正在登陆,请稍后...'
   });
  }
 }

ext4的键盘事件相当于之前的版本有所变化:

在窗口中添加render事件就可以了

render: function(input) {
     new Ext.KeyMap(input.getEl(), [{
      key : Ext.EventObject.ENTER,
      fn : function(){
       login();
      }
     }]);
    },

 

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,