ExtJS4.2学习(22)登录界面

现在开始我们来慢慢完善这个系统，今天做一个登录界面，此套系统已经开始慢慢加入Java各种框架，或者后期我会自己定义合适的框架，让它可以完整的跑下来。

今天做的是用window包裹panel，panel再包裹tabpanel实现的：先来看看今天做的效果图：

login.jsp

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;  </code>

<code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;  </code>

<code>&lt;</code><code>html</code><code>&gt;  </code>

<code>&lt;</code><code>head</code><code>&gt;  </code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"Content-Type"</code> <code>content</code><code>=</code><code>"text/html; charset=UTF-8"</code><code>&gt;  </code>

<code>&lt;</code><code>title</code><code>&gt;登录-ExtJS4.2学习之路&lt;/</code><code>title</code><code>&gt;  </code>

<code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"../ExtJS4.2/resources/css/ext-all-neptune-rtl.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;  </code>

<code>&lt;</code><code>link</code> <code>href</code><code>=</code><code>"../ExtJS4.2/css/icon.css"</code> <code>rel</code><code>=</code><code>"stylesheet"</code><code>&gt;  </code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../ExtJS4.2/ext-all.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;  </code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"../ExtJS4.2/locale/ext-lang-zh_CN.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;  </code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"../demo/js/login.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;  </code>

<code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;  </code>

<code>.user{background: url(../ExtJS4.2/icons/user.png) no-repeat 2px 2px;}  </code>

<code>.key{background: url(../ExtJS4.2/icons/key.png) no-repeat 2px 2px;}  </code>

<code>.Userkey{background: url(../ExtJS4.2/icons/Userkey.png) no-repeat 2px 2px;}  </code>

<code>.key,.user,.Userkey{  </code>

<code>            </code><code>background-color: #FFFFFF;  </code>

<code>            </code><code>padding-left: 20px;  </code>

<code>            </code><code>font-size: 12px;  </code>

<code>        </code><code>}  </code>

<code>.bgimage {   </code>

<code>   </code><code>background:url(../demo/image/logo.jpg ) no-repeat top;  </code>

<code>   </code><code>position:absolute;  </code>

<code>}  </code>

<code>&lt;/</code><code>style</code><code>&gt;  </code>

<code>&lt;/</code><code>head</code><code>&gt;  </code>

<code>&lt;</code><code>body</code><code>&gt;  </code>

<code>    </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"hello-tabs"</code><code>&gt;  </code>

<code>        </code><code>&lt;!-- &lt;img border="0" width="430" height="60"    src="../demo/image/logo.jpg" /&gt; --&gt;</code>  

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;  </code>

<code>    </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"aboutDiv"</code> <code>class</code><code>=</code><code>"x-hidden"</code>  

<code>        </code><code>style</code><code>=</code><code>'color: black; padding-left: 10px; padding-top: 10px; font-size: 12px'</code><code>&gt;  </code>

<code>    </code><code>思考者日记网ExtJs学习系统 v1.0&lt;</code><code>br</code><code>/&gt;&lt;</code><code>br</code><code>/&gt;  </code>

<code>    </code><code>2013-2014 思考者日记网|束洋洋个人博客（沪ICP备13005070）&lt;</code><code>br</code><code>/&gt;&lt;</code><code>br</code><code>/&gt;  </code>

<code>    </code><code>官方网站:&lt;</code><code>a</code> <code>href</code><code>=</code><code>"http://www.shuyangyang.com.cn"</code> <code>target</code><code>=</code><code>"_blank"</code><code>&gt;www.shuyangyang.com.cn&lt;/</code><code>a</code><code>&gt;  </code>

<code>&lt;/</code><code>body</code><code>&gt;  </code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

其中自定义了一些CSS和自己加的DIV，为了实现上面的图片和tabpanel里的东西，再看看关键的login.js

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

<code>Ext.onReady(</code><code>function</code><code>() {  </code>

<code>    </code><code>var</code> <code>userLoginPanel = Ext.create(</code><code>'Ext.panel.Panel'</code><code>, {  </code>

<code>        </code><code>bodyCls: </code><code>'bgimage'</code><code>,  </code>

<code>        </code><code>border : </code><code>false</code><code>,  </code>

<code>        </code><code>defaults:{  </code>

<code>            </code><code>margin:</code><code>'58 0'</code>  

<code>        </code><code>},  </code>

<code>        </code><code>items:{  </code>

<code>            </code><code>xtype : </code><code>'tabpanel'</code><code>,  </code>

<code>            </code><code>id : </code><code>'loginTabs'</code><code>,  </code>

<code>            </code><code>activeTab : 0,  </code>

<code>            </code><code>height : 180,  </code>

<code>            </code><code>border : </code><code>false</code><code>,  </code>

<code>            </code><code>items:[{  </code>

<code>                </code><code>title : </code><code>"身份认证"</code><code>,  </code>

<code>                </code><code>xtype : </code><code>'form'</code><code>,  </code>

<code>                </code><code>id : </code><code>'loginForm'</code><code>,  </code>

<code>                </code><code>defaults : {  </code>

<code>                    </code><code>width : 260,  </code>

<code>                    </code><code>margin: </code><code>'10 0 0 70'</code>  

<code>                </code><code>},  </code>

<code>                </code><code>// The fields  </code>

<code>                </code><code>defaultType : </code><code>'textfield'</code><code>,  </code>

<code>                </code><code>labelWidth : 40,  </code>

<code>                </code><code>items: [{  </code>

<code>                    </code><code>fieldLabel: </code><code>'用户名'</code><code>,  </code>

<code>                    </code><code>cls : </code><code>'user'</code><code>,  </code>

<code>                    </code><code>name: </code><code>'username'</code><code>,  </code>

<code>                    </code><code>labelAlign:</code><code>'right'</code><code>,  </code>

<code>                    </code><code>labelWidth:65,  </code>

<code>                    </code><code>maxLength : 30,  </code>

<code>                    </code><code>emptyText:</code><code>'请在这里填写用户名'</code><code>,  </code>

<code>                    </code><code>maxLengthText : </code><code>'账号的最大长度为30个字符'</code><code>,  </code>

<code>                    </code><code>blankText:</code><code>"用户名不能为空，请填写！"</code><code>,</code><code>//错误提示信息，默认为This field is required!  </code>

<code>                    </code><code>allowBlank: </code><code>false</code>  

<code>                </code><code>},{  </code>

<code>                    </code><code>fieldLabel: </code><code>'密   码'</code><code>,  </code>

<code>                    </code><code>cls : </code><code>'key'</code><code>,  </code>

<code>                    </code><code>name: </code><code>'password'</code><code>,  </code>

<code>                    </code><code>inputType:</code><code>"password"</code><code>,  </code>

<code>                    </code><code>emptyText:</code><code>'请在这里填写密码'</code><code>,  </code>

<code>                    </code><code>maxLengthText :</code><code>'密码长度不能超过20'</code><code>,  </code>

<code>                    </code><code>maxLength : 20,  </code>

<code>                    </code><code>blankText:</code><code>"密码不能为空，请填写！"</code><code>,</code><code>//错误提示信息，默认为This field is required!  </code>

<code>                    </code><code>xtype:</code><code>"combo"</code><code>,  </code>

<code>                    </code><code>fieldLabel: </code><code>'角   色'</code><code>,  </code>

<code>                    </code><code>cls : </code><code>'Userkey'</code><code>,  </code>

<code>                    </code><code>name: </code><code>'role'</code><code>,  </code>

<code>                    </code><code>store:[</code><code>"管理员"</code><code>,</code><code>"校领导"</code><code>,</code><code>"教职工"</code><code>],</code><code>//数据源为一数组  </code>

<code>                    </code><code>emptyText:</code><code>'请选择角色.'</code><code>,  </code>

<code>                    </code><code>blankText:</code><code>"请选择角色！"</code><code>,</code><code>//错误提示信息，默认为This field is required!  </code>

<code>                </code><code>}, {  </code>

<code>                    </code><code>id : </code><code>'id_reg_panel'</code><code>,  </code>

<code>                    </code><code>xtype : </code><code>'panel'</code><code>,  </code>

<code>                    </code><code>border : </code><code>false</code><code>,  </code>

<code>                    </code><code>hidden : </code><code>true</code><code>,  </code>

<code>                    </code><code>html : </code><code>'&lt;br&gt;&lt;span id='</code><code>messageTip</code><code>' style='</code><code>color:red</code><code>'&gt; &lt;/span&gt;'</code>  

<code>                </code><code>}]  </code>

<code>            </code><code>}, {  </code>

<code>                </code><code>title : </code><code>'关于'</code><code>,  </code>

<code>                </code><code>contentEl : </code><code>'aboutDiv'</code><code>,  </code>

<code>                    </code><code>width : 230  </code>

<code>                </code><code>}  </code>

<code>            </code><code>}]  </code>

<code>    </code><code>});  </code>

<code>      </code> 

<code>    </code><code>Ext.create(</code><code>'Ext.window.Window'</code><code>, {  </code>

<code>        </code><code>title : </code><code>'SHUYANGYANGExtJs学习系统'</code><code>,  </code>

<code>        </code><code>width : 440,  </code>

<code>        </code><code>height : 300,  </code>

<code>        </code><code>layout: </code><code>'fit'</code><code>,  </code>

<code>        </code><code>plain : </code><code>true</code><code>,  </code>

<code>        </code><code>modal : </code><code>true</code><code>,  </code>

<code>        </code><code>maximizable : </code><code>false</code><code>,  </code>

<code>        </code><code>draggable : </code><code>false</code><code>,  </code>

<code>        </code><code>closable : </code><code>false</code><code>,  </code>

<code>        </code><code>resizable : </code><code>false</code><code>,  </code>

<code>        </code><code>items: userLoginPanel,  </code>

<code>        </code><code>// 重置 和 登录 按钮.  </code>

<code>        </code><code>buttons: [{  </code>

<code>            </code><code>text: </code><code>'重置'</code><code>,  </code>

<code>            </code><code>iconCls : </code><code>'Wrench'</code><code>,  </code>

<code>            </code><code>handler: </code><code>function</code><code>() {  </code>

<code>                </code><code>Ext.Msg.alert(</code><code>'提示'</code><code>, </code><code>'重置！'</code><code>);  </code>

<code>            </code><code>}  </code>

<code>        </code><code>}, {  </code>

<code>            </code><code>text: </code><code>'登录'</code><code>,  </code>

<code>            </code><code>iconCls : </code><code>'User'</code><code>,  </code>

<code>                </code><code>Ext.Msg.wait(</code><code>"请等待"</code><code>, </code><code>"温馨提示"</code><code>, {  </code>

<code>                    </code><code>text:</code><code>'正在登录……'</code>  

<code>                </code><code>});  </code>

<code>        </code><code>}]  </code>

<code>    </code><code>}).show();  </code>

<code>});</code>

这里大家可以自由发挥，加一些触发事件来实现与后台交互，这里我就不多写了，后续完善的时候我会写出来，因为现在静态要实现的太多了，慢慢来。看到不懂的属性或者地方，大家就去查API吧，相信学了这么久，这个你应该会的吧？

本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1570902，如需转载请自行联系原作者