ExtJs4 用户登录窗口

最新推荐文章于 2018-01-10 18:14:37 发布

老鼠的猫

最新推荐文章于 2018-01-10 18:14:37 发布

阅读量1.5k

点赞数

分类专栏： ext4.1

本文链接：https://blog.csdn.net/jing52hao/article/details/8265562

版权

ext4.1 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

//用户登录窗口

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();
      }
     }]); 
    },