一个漂亮的ExtJs登录窗口（实现登录跳转）
2013-06-15 13:14
381 查看
这几天有代码任务，自己做了个登录界面，感觉不错，拿来共享一下~~
[javascript] view
plaincopy
<link rel="stylesheet" href="/ext-3.2.1/resources/css/ext-all.css"
type="text/css"></link>
<script type="text/javascript" src="/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.2.1/ext-all.js"></script>
</head>
<body>
<script language="javascript">
var uname = new Ext.form.TextField( {
id :'uname',
fieldLabel : '用户名',
name : 'name',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank : false,//不允许为空
value : "admin",
blankText : '用户名不能为空'//错误提示内容
});
var pwd = new Ext.form.TextField( {
id : 'pwd',
//xtype: 'textfield',
inputType : 'password',
fieldLabel : '密 码',
//anchor:'95%',
maxLength : 10,
name : 'password',
allowBlank : false,
value : "12345",
blankText : '密码不能为空'
});
Ext.onReady(function() {
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//定义表单
var simple = new Ext.FormPanel( {
labelWidth : 75,
defaults : {
width : 150
},
defaultType : 'textfield',//默认字段类型
bodyStyle : 'background: #cdcdcd;padding:30 0 0 20;',
border : false,
buttonAlign : 'center',
border : false,
id : "form",
//定义表单元素
items : [ uname, pwd ],
buttons : [ {
text : '登录',
type : 'submit',
id : 'sb',
//定义表单提交事件
handler : save
}, {
text : '重置',
handler : function() {
simple.form.reset();
}
} ],
keys : [ {
key : Ext.EventObject.ENTER,
fn : save,
scope : this
} ]
});
function save() {
var userName = uname.getValue();
var userPass = pwd.getValue();
//验证合法后使用加载进度条
if (simple.form.isValid()) {
//提交到服务器操作
simple.form.submit({
waitMsg : '正在进行登陆验证,请稍后...',
url : 'login!checkUser.action',
method : 'post',
params : {
userName : userName,
userPass : userPass
},
//提交成功的回调函数
success : function(form, action) {
if (action.result.msg == 'OK') {
window.location.href="login!index.action?userName="+userName;
}else if(action.result.msg == 'ERROR') {
window.location.href="index.jsp";
}
},
//提交失败的回调函数
failure : function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('错误提示', '表单数据非法请核实后重新输入！');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('错误提示', '网络连接异常！');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('错误提示', "您的输入用户信息有误，请核实后重新输入！");
simple.form.reset();
}
}
});
}
};
//定义窗体
var win = new Ext.Window({
id : 'win',
layout : 'fit', //自适应布局
align : 'center',
width : 330,
height : 182,
resizable : false,
draggable : false,
border : false,
bodyStyle : 'padding:5px;background:gray',
maximizable : false,//禁止最大化
closeAction : 'close',
closable : false,//禁止关闭,
items : simple
//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体
pwd.focus(false, 100);
});
</script>
</body>
效果：
这里是在SSH框架上做的。而且实现了struts2登录跳转。
关于登录跳转，很多人都说难做，也确实有点难做。因为submit提交后success里得到的是个字符串，并不会完成页面跳转的动作！要想跳转，得自己在success里写跳转的代码。上面我用的方式是一种，有一点不好的是：通过window.location.href方式跳转到主页面，浏览器的URL里显示传递的参数！
我知道，还有一种瞒天过海之术，可以不会把参数显示在url里。就是在做一个div，设置这个div为不可见。这个div里放置一个form，给这个form配置method=post。然后将window.location.href="login!index.action?userName="+userName;替换成:那个form.action=login!index.action;form.submit会实现成功跳转。但这种办法最好不要用！
[javascript] view
plaincopy
<link rel="stylesheet" href="/ext-3.2.1/resources/css/ext-all.css"
type="text/css"></link>
<script type="text/javascript" src="/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-3.2.1/ext-all.js"></script>
</head>
<body>
<script language="javascript">
var uname = new Ext.form.TextField( {
id :'uname',
fieldLabel : '用户名',
name : 'name',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank : false,//不允许为空
value : "admin",
blankText : '用户名不能为空'//错误提示内容
});
var pwd = new Ext.form.TextField( {
id : 'pwd',
//xtype: 'textfield',
inputType : 'password',
fieldLabel : '密 码',
//anchor:'95%',
maxLength : 10,
name : 'password',
allowBlank : false,
value : "12345",
blankText : '密码不能为空'
});
Ext.onReady(function() {
//使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//定义表单
var simple = new Ext.FormPanel( {
labelWidth : 75,
defaults : {
width : 150
},
defaultType : 'textfield',//默认字段类型
bodyStyle : 'background: #cdcdcd;padding:30 0 0 20;',
border : false,
buttonAlign : 'center',
border : false,
id : "form",
//定义表单元素
items : [ uname, pwd ],
buttons : [ {
text : '登录',
type : 'submit',
id : 'sb',
//定义表单提交事件
handler : save
}, {
text : '重置',
handler : function() {
simple.form.reset();
}
} ],
keys : [ {
key : Ext.EventObject.ENTER,
fn : save,
scope : this
} ]
});
function save() {
var userName = uname.getValue();
var userPass = pwd.getValue();
//验证合法后使用加载进度条
if (simple.form.isValid()) {
//提交到服务器操作
simple.form.submit({
waitMsg : '正在进行登陆验证,请稍后...',
url : 'login!checkUser.action',
method : 'post',
params : {
userName : userName,
userPass : userPass
},
//提交成功的回调函数
success : function(form, action) {
if (action.result.msg == 'OK') {
window.location.href="login!index.action?userName="+userName;
}else if(action.result.msg == 'ERROR') {
window.location.href="index.jsp";
}
},
//提交失败的回调函数
failure : function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert('错误提示', '表单数据非法请核实后重新输入！');
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert('错误提示', '网络连接异常！');
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert('错误提示', "您的输入用户信息有误，请核实后重新输入！");
simple.form.reset();
}
}
});
}
};
//定义窗体
var win = new Ext.Window({
id : 'win',
layout : 'fit', //自适应布局
align : 'center',
width : 330,
height : 182,
resizable : false,
draggable : false,
border : false,
bodyStyle : 'padding:5px;background:gray',
maximizable : false,//禁止最大化
closeAction : 'close',
closable : false,//禁止关闭,
items : simple
//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体
pwd.focus(false, 100);
});
</script>
</body>
效果：
这里是在SSH框架上做的。而且实现了struts2登录跳转。
关于登录跳转，很多人都说难做，也确实有点难做。因为submit提交后success里得到的是个字符串，并不会完成页面跳转的动作！要想跳转，得自己在success里写跳转的代码。上面我用的方式是一种，有一点不好的是：通过window.location.href方式跳转到主页面，浏览器的URL里显示传递的参数！
我知道，还有一种瞒天过海之术，可以不会把参数显示在url里。就是在做一个div，设置这个div为不可见。这个div里放置一个form，给这个form配置method=post。然后将window.location.href="login!index.action?userName="+userName;替换成:那个form.action=login!index.action;form.submit会实现成功跳转。但这种办法最好不要用！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一个漂亮的ExtJs登录窗口（实现登录跳转）
- 发布一个WTL实现的QQ2009登录窗口源码
- react点击按钮跳转到一个新的窗口的功能实现
- 【原创】等待窗口，载入数据完成后自动关闭。跨一个IFRAME , ExtJs实现。
- 新建一个登录,找回密码,注册页面的工程,使用控制器实现三个页面的跳转
- 如何用java图形化界面实现一个登录窗口
- struts2 结合extjs实现的一个登录实例
- 创建并部署一个Servlet，要求在实现用户登录功能，当用户名和密码正确时跳转到欢迎页面，否则提示出错信息
- 发布一个WTL实现的QQ2009登录窗口源码
- struts2 结合extjs实现的一个登录实例
- struts2 结合extjs实现的一个登录实例
- WIN32汇编语言在窗口添加按钮，点击按钮实现跳转到一个程序或者一个URL。。。
- struts2 结合extjs实现的一个登录实例
- struts2 结合extjs实现的一个登录实例
- Extjs4中表单登录功能，实现登录成功跳转页面
- 实现一个登录界面跳转到UITabBarController界面
- 利用同一个Activity界面实现二个不同的界面之间的跳转
- 一个漂亮的弹出窗口
- 利用Xpath实现一个简单的登录验证程序
- jquery 弹出登录窗口实现代码