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 ,
