Extjs4.0 登陆界面

最新推荐文章于 2016-12-16 13:02:51 发布

原创最新推荐文章于 2016-12-16 13:02:51 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #EXTJS #ViewUI

软件开发专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了使用Ext.js框架创建一个包含登录功能的窗口，包括窗口样式、布局、表单输入验证以及登录逻辑处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

Ext.onReady(function(){
var winLogin = Ext.create("Ext.window.Window",{
width : 400 ,
height : 270 ,
modal : true , // 窗口弹出，其他地方不可操作
title : '&nbsp;登陆 ' ,
collapsible : true ,  // 收缩按钮
closable : false , // 是否显示关闭窗口按钮
iconCls : 'key',// cog , database_gear
resizable : false , // 窗体是否可以拉伸
constrain:true,
items : [{
xtype:'panel',
width:'100%',
height:100,
padding:'1px',
html:"<img src='css/icons/1_log.png' height='100%' width='100%'/>"
},{
xtype:'form',
width:'100%',
id:'myform',
height:130,
//frame: true,
padding:'1px',
buttonAlign : 'center',
items:[{
xtype:'textfield',
id:'username',
name:'username',
fieldCls:'login_account',
fieldLabel:'账&nbsp;&nbsp;号&nbsp;&nbsp;',
width:300,
margin:'10,10,10,10',
labelAlign : 'right'

},{
xtype:"textfield",
id:'password',
name:'password',
fieldCls:'login_password',
width:300,
fieldLabel:'密&nbsp;&nbsp;码&nbsp;&nbsp;',
margin:'10,10,10,10',
labelAlign : 'right',
inputType:'password'
},{
xtype:'panel',
width:'100%',
bodyStyle: 'border:0',
html:"<p align='right'>版权所有：银川赛瑞格计算机科技有限公司</p>"
}],
buttons : [{
text:'登陆',
layout:'fit',
type:'submit',
handler:function(){
var _username = Ext.getCmp('username').getValue();
var _password = Ext.getCmp('password').getValue();

if(_username==""){
Ext.Msg.alert("提示","用户名不能为空，请输入用户名");
} else if(_password==""){
Ext.Msg.alert("提示","密码不能为空，请输入用户名");
} else {
// 掩饰层 (遮罩效果)
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"正在登陆，请稍后..."});
myMask.show();

Ext.Ajax.request({
url:'login.action',
method:'POST',
success:function(response,opts){
var sf= Ext.JSON.decode(response.responseText);
if(sf.success){
myMask.hide();
Ext.Msg.alert("提示","登陆成功!!!");
window.location.href="toIndex.action";
} else {
myMask.hide();
Ext.Msg.alert("提示","登陆失败...");
}
},
failure:function(response,opts){
myMask.hide();
Ext.Msg.alert("提示","登陆失败");
},
params:{
username:_username,
password:_password
}
})
}
}
},{
text:'重置',
handler:function(){
Ext.getCmp('myform').form.reset();
}
}]
}],
renderTo:Ext.getBody()
});
winLogin.show();
})