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

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

login.jpg

about.jpg

login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>登录-ExtJS4.2学习之路</title>  
<link href="../ExtJS4.2/resources/css/ext-all-neptune-rtl.css" rel="stylesheet">  
<link href="../ExtJS4.2/css/icon.css" rel="stylesheet">  
<script src="../ExtJS4.2/ext-all.js"></script>  
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>  
<script type="text/javascript" src="../demo/js/login.js"></script>  
<style type="text/css">  
.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;  
        }  
.bgimage {   
   background:url(../demo/image/logo.jpg ) no-repeat top;  
   position:absolute;  
}  
</style>  
</head>  
<body>  
    <div id="hello-tabs">  
        <!-- <img border="0" width="430" height="60"    src="../demo/image/logo.jpg" /> -->  
    </div>  
    <div id="aboutDiv" class="x-hidden"  
        style='color: black; padding-left: 10px; padding-top: 10px; font-size: 12px'>  
    思考者日记网ExtJs学习系统 v1.0<br/><br/>  
    2013-2014 思考者日记网|束洋洋个人博客(沪ICP备13005070)<br/><br/>  
    官方网站:<a href="http://www.shuyangyang.com.cn" target="_blank">www.shuyangyang.com.cn</a>  
    </div>  
</body>  
</html>

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

Ext.onReady(function() {  
    var userLoginPanel = Ext.create('Ext.panel.Panel', {  
        bodyCls: 'bgimage',  
        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 : '<br><span id='messageTip' style='color:red'> </span>'  
                }]  
            }, {  
                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