基于ExtJS-2.2实现的Ajax登录页面

最近对Acegi的改造比较感兴趣，所以基于Acegi和ExtJS做了一个Ajax的权限系统，此篇只讲述Ext登录页面的前台实现。如对Acegi的Ajax实现感兴趣可以参考我另外的Blog。如对此篇内容有疑问，请留言。

 

此篇Blog将由三部分构成：

  1. 实现的效果图

  2. 实现关键点的简要说明

  3. 完整的JS代码清单

 

如对代码部分感兴趣可以直接跳至此文结尾部分。

 

贴了几张效果图，毕竟看图说话比较方便哈。

 

Diagram01. 登录窗口的初始状态图

 

Diagram02. 悬停在"RememberMe"上显示的提示

 

Diagram03. 必输项空值时校验的错误信息

 

Diagram04. 点击“校验错误”时的详细信息提示

 

 

Diagram05. 用户名的ComboBox效果图，记录了此前登录的用户名

 

Diagram06. 登录页面整体效果

 

Diagram07. 点击“帮助”，显示的帮助信息，Json异步数据传递

 

好，图归正传，现在就实现代码的关键部分做一下简要的说明。

 

登录框的实现，参考了Ext的Advanced StatusBar Example，现在说明下单选框的实现。此部分代码为CheckBox的实现，开始时简单的使用了CheckBox布局，但在IE浏览器下，CheckBox居中显示了，而且很难调整，后改用checkboxgroup来实现，在boxLabel中添加了< img >标签用来实现悬停显示提示的功能。

 

{
	                xtype: 'checkboxgroup',
	                fieldLabel: '记住我',
	                height: 20,
	                allowBlank: true,
	                items: [{
	                    boxLabel: '&nbsp;&nbsp;<img style="height: 10px;" src="../images/platform/icon/question_small_no_border.png" ext:qtip="勾选后，5日内无需登录" />',
	                    itemCls : 'required',
	                    id: '_acegi_security_remember_me',
	                    name: '_acegi_security_remember_me',
	                    inputValue: 'true'
	                }]
	            }

  

 

 

以下是完整得JS代码

/**
 * login.js Power by YUI-EXT and JSON.
 * 
 * @author seraph
 * @email [e-mail]
 */
 
var Login = { 
	author: "Seraph",
	version: "0.1.0"
};

var loginPanel;

Ext.QuickTips.init();

Ext.onReady(function(){
	
		var userNames = [];
	    var store = new Ext.data.Store({
	        proxy: new Ext.data.MemoryProxy(userNames),
	        reader: new Ext.data.ArrayReader({}, [{name: 'userName'}])
	    });
	    store.load();

		var loginFormPanel = new Ext.FormPanel({
	        id: 'login-form',
	        renderTo: Ext.getBody(),
	        labelWidth: 55,
	        frame: false,
	        bodyStyle:'background-color: #DFE8F6; padding-top: 25px; padding-left: 20px; border: 0px solid;',
	        defaults: {
	        	width: 230,
	        	anchor: '88%',
	        	allowBlank: false,
            	selectOnFocus: true,
	        	msgTarget: 'side'
	        },
	        defaultType: 'textfield',
	        method: 'POST',
			bodyBorder: false,
			border: false,
	        items: [
	        	{   xtype: 'combo',
	        		store: store,
					id: 'j_username',
	                name: 'j_username',
	                fieldLabel: '用户名',
	    	        displayField: 'userName',
	    	        valueField: 'userName',
	    	        typeAhead: true,
	    	        mode: 'local',
	    	        triggerAction: 'all',
	    	        selectOnFocus: true,
	    	        allowBlank: false,
	                blankText: '请输入用户名'
	            },{
					id: 'j_password',
	                name: 'j_password',
	                fieldLabel: '密   码',
	                inputType: 'password',
	                blankText: '请输入密码'
	            },{
	                xtype: 'checkboxgroup',
	                fieldLabel: '记住我',
	                height: 20,
	                allowBlank: true,
	                items: [{
	                    boxLabel: '&nbsp;&nbsp;<img style="height: 10px;" src="../images/platform/icon/question_small_no_border.png" ext:qtip="勾选后，5日内无需登录" />',
	                    itemCls : 'required',
	                    id: '_acegi_security_remember_me',
	                    name: '_acegi_security_remember_me',
	                    inputValue: 'true'
	                }]
	            }
	        ],
	        buttons: [{
	                    text:'登录',
	                    handler: function(){
	                    	if(loginFormPanel.getForm().isValid()){
			                    var sb = Ext.getCmp('form-statusbar');
			                    sb.showBusy('登录中...');
			                    // loginFormPanel.getEl().mask();
			                    
			                    var rememberMe = null;
			                    if($('_acegi_security_remember_me').checked) {
			                    	rememberMe = $('_acegi_security_remember_me').value;
			                    }

			                    Ext.Ajax.request({
			             		   url: 'j_acegi_security_check',
			             		   success: function(response) {
			             		   		var messager = response.responseText.evalJSON();
			             		   		if(messager.success) {
						                    sb.setStatus({
						                    	text: '登录成功!', 
						                    	iconCls: '',
						                    	clear: true
						                    });
						                    // loginFormPanel.getEl().unmask();
						                    location.href = messager.contents.targetUrl;
			             		   		} else {
				             		   		sb.setStatus({
						                    	text: '登录失败! 原因: ' + messager.contents.error, 
						                    	iconCls: '',
						                    	clear: true
						                    });
				             				userNames.push(new Array([messager.contents.key]));
				             				store.reload();
						                    // loginFormPanel.getEl().unmask();
			             		   		}
			             		   },
			             		   params: {j_username: $('j_username').value, j_password: $('j_password').value, _acegi_security_remember_me: rememberMe, ajax: true}
			             		});
	                    	}
						}
	                },{
	                    text: '重置',
	                    handler: function(){
	                    	loginFormPanel.form.reset();
	                    }
	        		}]
	    });
	
		loginPanel = new Ext.Window({
			el: 'login-window',
	        layout:'fit',
	        title: 'BISP-登录',
			width: 300,
	        height: 200,
			resizable : false,
			closeAction: 'hide',
			items: loginFormPanel,
			iconCls:'login-win',
	        bbar: new Ext.StatusBar({
	            id: 'form-statusbar',
	            defaultText: '待登录',
				plugins: new Ext.ux.ValidationStatus({form:'login-form'})
        	})
		});
		loginPanel.show();
});

var LoginPanel = {
		
	show : function() {
		loginPanel.show();
	}
}

 

评论

12 楼 hunnuxiaobo 2010-05-01  

ExtJS还是蛮强大的！

11 楼 leiwuluan 2009-10-17  

   

10 楼 Seraph115 2009-08-27  

alymail 写道

var messager = response.responseText.evalJSON();
非常想知道是什么值,我这边是跳转后的页面html

Messager是服务器返回的Java对象的json码，调用evalJSON()后json被转为javascript对象。
messager中写入了前台所需的响应，如跳转链接或错误消息

9 楼 alymail 2009-08-27  

var messager = response.responseText.evalJSON();
非常想知道是什么值,我这边是跳转后的页面html

8 楼 alymail 2009-08-27  

lz的messager是什么值,我得到的是页面的html代码.

7 楼 east_java 2009-07-31  

有源码下载就好了。。

6 楼 leon1509 2009-07-29  

是不是用了prototype？

5 楼 kirk1127 2009-07-28  

需要哪些js包能不能贴出来，最好能把源码共享下啊，呵呵

4 楼 Seraph115 2009-07-13  

jamix 写道

url:'j_acegi_security_check'
这是什么地址?新人...好奇的问下...

j_acegi_security_check这个是Acegi安全框架中的保留字，这个框架中还有大概4、5个保留字，链接指向的是鉴权过滤器，就是用来验证身份的，Acegi会调用Spring中配置的Acegi的bean。

3 楼 jamix 2009-07-13  

url:'j_acegi_security_check'
这是什么地址?新人...好奇的问下...

2 楼 jamix 2009-07-13  

NR...顶了...那么多代码从那写起???看API吗???
JS基础不大好...还是要先去啃JS去..

1 楼 hemin108 2009-07-04  

good ```