最近对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: ' <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 seraph115@gmail.com */ 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: ' <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(); } }