一个漂亮的ExtJs登录窗口（实现登录跳转）

最新推荐文章于 2022-09-26 11:54:16 发布

dingherry

最新推荐文章于 2022-09-26 11:54:16 发布

阅读量3w

点赞数 1

分类专栏： SSH Extjs 文章标签： extjs function login stylesheet border action

本文链接：https://blog.csdn.net/dingherry/article/details/6863868

版权

Extjs 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

SSH

4 篇文章 0 订阅

订阅专栏

这几天有代码任务，自己做了个登录界面，感觉不错，拿来共享一下~~

<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会实现成功跳转。但这种办法最好不要用！

dingherry

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
6
评论
一个漂亮的ExtJs登录窗口（实现登录跳转）

这几天有代码任务，自己做了个登录界面，感觉不错，拿来共享一下~~<link rel="stylesheet" href="/ext-3.2.1/resources/css/ext-all.css" type="text/css"> var uname = n
复制链接

扫一扫