ExtJS4.2學習(22)登陸界面

時間 2020-01-19

標籤 extjs4.2 extjs 學習登陸界面简体版

原文原文鏈接

如今開始咱們來慢慢完善這個系統，今天作一個登陸界面，此套系統已經開始慢慢加入Java各類框架，或者後期我會本身定義合適的框架，讓它能夠完整的跑下來。javascript

今天作的是用window包裹panel，panel再包裹tabpanel實現的：先來看看今天作的效果圖：css

<%@ 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;  
        }  
.bgp_w_picpath {   
   background:url(../demo/p_w_picpath/logo.jpg ) no-repeat top;  
   position:absolute;  
}  
</style>  
</head>  
<body>  
    <div id="hello-tabs">  
        <!-- <img border="0" width="430" height="60"    src="../demo/p_w_picpath/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.jsjava

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 : '<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框架

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。