extjs_zhangjun2

此篇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 >标签用来实现悬停显示提示的功能。

Js代码
1. {
2. xtype: 'checkboxgroup',
3. fieldLabel: '记住我',
4. height: 20,
5. allowBlank: true,
6. items: [{
7. boxLabel: '  <img style="height: 10px;" src="../images/platform/icon/question_small_no_border.png" ext:qtip="勾选后，5日内无需登录" />',
8. itemCls : 'required',
9. id: '_acegi_security_remember_me',
10. name: '_acegi_security_remember_me',
11. inputValue: 'true'
12. }]
13. }



以下是完整得JS代码
Js代码
1. /**
2. * login.js Power by YUI-EXT and JSON.
3. *
4. * @author seraph
5. * @email seraph115@gmail.com
6. */
7.
8. var Login = {
9. author: "Seraph",
10. version: "0.1.0"
11. };
12.
13. var loginPanel;
14.
15. Ext.QuickTips.init();
16.
17. Ext.onReady(function(){
18.
19. var userNames = [];
20. var store = new Ext.data.Store({
21. proxy: new Ext.data.MemoryProxy(userNames),
22. reader: new Ext.data.ArrayReader({}, [{name: 'userName'}])
23. });
24. store.load();
25.
26. var loginFormPanel = new Ext.FormPanel({
27. id: 'login-form',
28. renderTo: Ext.getBody(),
29. labelWidth: 55,
30. frame: false,
31. bodyStyle:'background-color: #DFE8F6; padding-top: 25px; padding-left: 20px; border: 0px solid;',
32. defaults: {
33. width: 230,
34. anchor: '88%',
35. allowBlank: false,
36. selectOnFocus: true,
37. msgTarget: 'side'
38. },
39. defaultType: 'textfield',
40. method: 'POST',
41. bodyBorder: false,
42. border: false,
43. items: [
44. { xtype: 'combo',
45. store: store,
46. id: 'j_username',
47. name: 'j_username',
48. fieldLabel: '用户名',
49. displayField: 'userName',
50. valueField: 'userName',
51. typeAhead: true,
52. mode: 'local',
53. triggerAction: 'all',
54. selectOnFocus: true,
55. allowBlank: false,
56. blankText: '请输入用户名'
57. },{
58. id: 'j_password',
59. name: 'j_password',
60. fieldLabel: '密   码',
61. inputType: 'password',
62. blankText: '请输入密码'
63. },{
64. xtype: 'checkboxgroup',
65. fieldLabel: '记住我',
66. height: 20,
67. allowBlank: true,
68. items: [{
69. boxLabel: '  <img style="height: 10px;" src="../images/platform/icon/question_small_no_border.png" ext:qtip="勾选后，5日内无需登录" />',
70. itemCls : 'required',
71. id: '_acegi_security_remember_me',
72. name: '_acegi_security_remember_me',
73. inputValue: 'true'
74. }]
75. }
76. ],
77. buttons: [{
78. text:'登录',
79. handler: function(){
80. if(loginFormPanel.getForm().isValid()){
81. var sb = Ext.getCmp('form-statusbar');
82. sb.showBusy('登录中...');
83. // loginFormPanel.getEl().mask();
84.
85. var rememberMe = null;
86. if($('_acegi_security_remember_me').checked) {
87. rememberMe = $('_acegi_security_remember_me').value;
88. }
89.
90. Ext.Ajax.request({
91. url: 'j_acegi_security_check',
92. success: function(response) {
93. var messager = response.responseText.evalJSON();
94. if(messager.success) {
95. sb.setStatus({
96. text: '登录成功!',
97. iconCls: '',
98. clear: true
99. });
100. // loginFormPanel.getEl().unmask();
101. location.href = messager.contents.targetUrl;
102. } else {
103. sb.setStatus({
104. text: '登录失败! 原因: ' + messager.contents.error,
105. iconCls: '',
106. clear: true
107. });
108. userNames.push(new Array([messager.contents.key]));
109. store.reload();
110. // loginFormPanel.getEl().unmask();
111. }
112. },
113. params: {j_username: $('j_username').value, j_password: $('j_password').value, _acegi_security_remember_me: rememberMe, ajax: true}
114. });
115. }
116. }
117. },{
118. text: '重置',
119. handler: function(){
120. loginFormPanel.form.reset();
121. }
122. }]
123. });
124.
125. loginPanel = new Ext.Window({
126. el: 'login-window',
127. layout:'fit',
128. title: 'BISP-登录',
129. width: 300,
130. height: 200,
131. resizable : false,
132. closeAction: 'hide',
133. items: loginFormPanel,
134. iconCls:'login-win',
135. bbar: new Ext.StatusBar({
136. id: 'form-statusbar',
137. defaultText: '待登录',
138. plugins: new Ext.ux.ValidationStatus({form:'login-form'})
139. })
140. });
141. loginPanel.show();
142. });
143.
144. var LoginPanel = {
145.
146. show : function() {
147. loginPanel.show();
148. }
149. }