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

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

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

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  
  
  
  
  
  
  
  
  
  
  
.user{background: url(../ExtJS4.2/icons/user.png) no-repeat 2px 2px;}  
.key{background: url(../ExtJS4.2/icons/key.png) no-repeat 2px 2px;}  
.Userkey{background: url(../ExtJS4.2/icons/Userkey.png) no-repeat 2px 2px;}  
.key,.user,.Userkey{  
            background-color: #FFFFFF;  
            padding-left: 20px;  
            font-size: 12px;  
        }  
.bgp_w_picpath {   
   background:url(../demo/p_w_picpath/logo.jpg ) no-repeat top;  
   position:absolute;  
}  
  
  
  
      
          
    

              思考者日记网ExtJs学习系统 v1.0

       2013-2014 思考者日记网|束洋洋个人博客（沪ICP备13005070）

       官方网站:www.shuyangyang.com.cn       

     

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

Ext.onReady(function() {  
    var userLoginPanel = Ext.create('Ext.panel.Panel', {  
        bodyCls: 'bgp_w_picpath',  
        border : false,  
        defaults:{  
            margin:'58 0'  
        },  
        items:{  
            xtype : 'tabpanel',  
            id : 'loginTabs',  
            activeTab : 0,  
            height : 180,  
            border : false,  
            items:[{  
                title : "身份认证",  
                xtype : 'form',  
                id : 'loginForm',  
                defaults : {  
                    width : 260,  
                    margin: '10 0 0 70'  
                },  
                // The fields  
                defaultType : 'textfield',  
                labelWidth : 40,  
                items: [{  
                    fieldLabel: '用户名',  
                    cls : 'user',  
                    name: 'username',  
                    labelAlign:'right',  
                    labelWidth:65,  
                    maxLength : 30,  
                    emptyText:'请在这里填写用户名',  
                    maxLengthText : '账号的最大长度为30个字符',  
                    blankText:"用户名不能为空，请填写！",//错误提示信息，默认为This field is required!  
                    allowBlank: false  
                },{  
                    fieldLabel: '密   码',  
                    cls : 'key',  
                    name: 'password',  
                    inputType:"password",  
                    labelWidth:65,  
                    labelAlign:'right',  
                    emptyText:'请在这里填写密码',  
                    maxLengthText :'密码长度不能超过20',  
                    maxLength : 20,  
                    blankText:"密码不能为空，请填写！",//错误提示信息，默认为This field is required!  
                    allowBlank: false  
                },{  
                    xtype:"combo",  
                    fieldLabel: '角   色',  
                    cls : 'Userkey',  
                    name: 'role',  
                    labelAlign:'right',  
                    labelWidth:65,  
                    store:["管理员","校领导","教职工"],//数据源为一数组  
                    emptyText:'请选择角色.',  
                    blankText:"请选择角色！",//错误提示信息，默认为This field is required!  
                    allowBlank: false  
                }, {  
                    id : 'id_reg_panel',  
                    xtype : 'panel',  
                    border : false,  
                    hidden : true,  
                    html : '
 '  
                }]  
            }, {  
                title : '关于',  
                contentEl : 'aboutDiv',  
                defaults : {  
                    width : 230  
                }  
            }]  
        }  
    });  
      
    Ext.create('Ext.window.Window', {  
        title : 'SHUYANGYANGExtJs学习系统',  
        width : 440,  
        height : 300,  
        layout: 'fit',  
        plain : true,  
        modal : true,  
        maximizable : false,  
        draggable : false,  
        closable : false,  
        resizable : false,  
        items: userLoginPanel,  
        // 重置 和 登录 按钮.  
        buttons: [{  
            text: '重置',  
            iconCls : 'Wrench',  
            handler: function() {  
                Ext.Msg.alert('提示', '重置！');  
            }  
        }, {  
            text: '登录',  
            iconCls : 'User',  
            handler: function() {  
                Ext.Msg.wait("请等待", "温馨提示", {  
                    text:'正在登录……'  
                });  
            }  
        }]  
    }).show();  
});

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

连载中，请大家继续关注！本文出自我的个人网站思考者日记网

论坛汇总贴：http://bbs.51cto.com/thread-1106544-1.html