用extjs寫一個(gè)登錄界面

上效果圖：

這是一個(gè)用ext3.2.0、js、html、css寫的一個(gè)還算好看的登錄界面。

源代碼已上傳，下載地址請(qǐng)點(diǎn)擊：點(diǎn)擊打開鏈接

其主要難點(diǎn)在如何使用extjs來畫一個(gè)界面，接下來我們就主要看一下其中的html和js吧：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄界面</title>
<link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>
<script type="text/javascript" src="loginToDo.js"></script>
<link rel="stylesheet" type="text/css" href="login.css"/>
</head>
<body onkeydown="keyLogin(event);">
</body>
</html>

這里面主要是導(dǎo)入頁面所需的js和css文件，當(dāng)然還有一個(gè)亮點(diǎn)就是body標(biāo)簽上的 onkeydown事件屬性，主要用于監(jiān)聽鍵盤實(shí)現(xiàn)我們js中的enter鍵提交功能。然后看一下extjs的語言風(fēng)格吧：

Ext.onReady(function () {
// 創(chuàng)建“登錄”面板
var loginPanel = new Ext.Panel({
// 設(shè)置面板的位置、寬高、樣式
// 注意：此處我用的是相對(duì)布局relative（用于比較兩者的區(qū)別）
id: 'loginPan',
x: 363,
y: 0,
width: 396,
height: 480,
baseCls: '',
defaults: {
border: false
},
// 添加面板里面的物品
items: [
{
// 第一件：logo圖
id: 'loginLogo',
height: 160,
frame: false,
bodyStyle: 'padding-top:10px',
html: '<img src="images/fly_icon.png">'
},
{
// 第二件：登錄的表單
id: 'loginForm',
defaultType: 'textfield',
frame: false,
defaults: {
allowBlank: false
},
// 添加表單里面的物品：兩個(gè)輸入框
items: [
{
id: "username",
cls: "text_field",
inoutType: 'text',
width: 330,
height: 28,
blankText: '賬號(hào)不能為空',
emptyText: '請(qǐng)輸入賬號(hào)',
},
{
id: "password",
cls: "text_field",
inputType: 'password',
width: 330,
height: 28,
emptyText: '請(qǐng)輸入密碼',
blankText: '密碼不能為空',
}]
},
{
// 第三件：忘記密碼
id: 'loginForget',
html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
},
{
// 第四件：登錄按鈕
id: 'loginBtn',
html: '<button id="btn_login">馬上登錄</button>',
}
],
});
// 創(chuàng)建“注冊(cè)”面板
var registerPanel = new Ext.Panel({
// 設(shè)置面板的位置、寬高、樣式
// 注意：此處我用的是絕對(duì)布局absolute（用于比較兩者的區(qū)別）
id: 'registerPan',
x: 0,
y: 46,
width: 800,
height: 389,
baseCls: '',
layout: 'absolute',
defaults: {
border: false
},
// 添加面板里面的物品
items: [
{
// 第一件：標(biāo)題
id: 'registerTitleLabel',
xtype: 'label',
x: 47,
y: 50,
text: '還沒有賬號(hào)？',
}, {
// 第二件：正文
id: 'registerContentLabel',
xtype: 'label',
x: 47,
y: 135,
text: '這是在注冊(cè)面板下面的正文內(nèi)容。里面的內(nèi)容可以隨便寫，比如當(dāng)前我們?cè)僖粋€(gè)窗口下面建立了兩個(gè)面板。而兩個(gè)面板的布局是分別用相對(duì)布局和絕對(duì)布局來實(shí)現(xiàn)的。相比較而言，我覺得用絕對(duì)布局會(huì)簡(jiǎn)單粗暴，更直接，更方便。總之，你們自己體會(huì)一下吧。',
}, {
// 第三件：注冊(cè)按鈕
id: 'registerBtn',
xtype: 'button',
x: 47,
y: 280,
html: '<button id="btn_register" >馬上注冊(cè)</button>'
}],
});
// 創(chuàng)建窗口，從而讓內(nèi)容達(dá)到居中效果
var centerWindow = new Ext.Window({
baseCls: '',
width: 800,
height: 480,
layout: 'absolute',
closable: false,
draggable: false,
resizable: false,
shadow: false,
border: false,
items: [registerPanel, loginPanel],
});
// 顯示窗口
centerWindow.show();
// 添加瀏覽器縮放自動(dòng)居中效果
Ext.EventManager.onWindowResize(function () {
centerWindow.center();
});
});

這里要說的是：1、注意給屬性加標(biāo)記，能用id就用id，cls只是一個(gè)封裝過的class，和原生的class還是有區(qū)別的，比如給一個(gè)cls元素的height、padding定義樣式并不起作用。詳見：關(guān)于extjs中的cls ≠ class

2、在ext中建議用絕對(duì)定位，由于它底層是一個(gè)個(gè)的table、div塊，如果用相對(duì)定位的話偶爾是有偏差的，所以還是絕對(duì)定位方便直接啊。

3、window自帶居中效果，可以利用這一點(diǎn)讓元素在屏幕中居中。但是當(dāng)瀏覽器縮放的時(shí)候，這個(gè)window并不會(huì)動(dòng)，每次都需要重新刷新一下才會(huì)改變一下。所以，在以上代碼的最后我們用給這個(gè)centerWindow添加了一個(gè)窗口自適應(yīng)居中的效果。

在網(wǎng)頁中將 HTML 元素水平居中，可以使用 CSS 中的 margin: 0 auto; 屬性。以下是一種常用的實(shí)現(xiàn)方法：

<!DOCTYPE html>

<head>

<title>Horizontal Centering</title>

<style>

.center {

width: 300px; /* 設(shè)置元素寬度 */

margin: 0 auto; /* 水平居中 */

background-color: lightblue;

padding: 20px;

}

</style>

</head>

<body>

<p>This element is horizontally centered.</p>

</div>

</body>

</html>

在上面的示例中， center 類的元素使用了 width: 300px; 來設(shè)置寬度，然后通過 margin: 0 auto; 來實(shí)現(xiàn)水平居中。這樣，無論屏幕寬度如何變化，元素都會(huì)始終水平居中顯示。

您也可以將此樣式應(yīng)用到任何 HTML 元素（例如 div 、 span 、 p 等），以實(shí)現(xiàn)水平居中效果。

.水平居中的 margin：0 auto;

關(guān)于這個(gè)，大家也不陌生做網(wǎng)頁讓其居中用的比較多, 這個(gè)是用于子元素上的，前提是不受float影響

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，去年我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。

2.水平居中 text-align：center；

img的display：inline-block；類似一樣在不受float影響下進(jìn)行實(shí)在父元素上添加效果讓它進(jìn)行水平居中

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            text-align: center;
        }
        img{
            display: inline-block;
            width: 100px;
            height: 100px;
            /*margin: 0 auto;*/
        }
    </style>

<!--html-->
<body>
    <div class="box">
        ![](img1.jpg)
    </div>
</body>

3.水平垂直居中（一）定位和需要定位的元素的margin減去寬高的一半
這種方法的局限性在于需要知道需要垂直居中的寬高才能實(shí)現(xiàn)，經(jīng)常使用這種方法

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 150px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -75px;
            margin-left: -50px;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](2.jpg)
    </div>
</body>

4.水平垂直居中（二）定位和margin:auto;
這個(gè)方法也很實(shí)用，不用受到寬高的限制,也很好用

    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            position: relative;

        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<!--html -->
<body>
    <div class="box" >
        ![](3.jpg)
    </div>
</body>

5.水平垂直居中（三）絕對(duì)定位和transfrom
這個(gè)方法比較高級(jí)了，用到了形變，據(jù)我所知很多大神喜歡使用這個(gè)方法進(jìn)行定位，逼格很高的，學(xué)會(huì)后面試一定要用！這個(gè)是不需要知道居中元素的寬高就可以使用的，代碼里的圖片稍微有點(diǎn)大，改改寬高，僅此而已，在面試中大部分人會(huì)問如果不知道寬高該如何居中，答這個(gè)，加分！對(duì)transform不了解的同學(xué)可以查閱一下資料了解一下！

<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        width: 300px;
        height: 300px;
        background:#e9dfc7; 
        border:1px solid red;
        position: relative;

    }
    img{
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](4.jpg)
    </div>
</body>

6.水平垂直居中（四）diplay：table-cell

其實(shí)這個(gè)就是把其變成表格樣式，再利用表格的樣式來進(jìn)行居中，很方便

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        img{
            width: 100px;
            height: 150px;
            /*margin: 0 auto;*/  這個(gè)也行
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](5.jpg)
    </div>
</body>

7.水平垂直居中（五）flexBox居中

這個(gè)用了C3新特性flex,非常方便快捷，在移動(dòng)端使用完美，pc端有兼容性問題，以后會(huì)成為主流的

<style>
    .box{
            width: 300px;
            height: 300px;
            background:#e9dfc7; 
            border:1px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
        }
        img{
            width: 150px;
            height: 100px;
        }
</style>
<!--html -->
<body>
    <div class="box" >
        ![](6.jpg)
    </div>
</body>

8.水平垂直居中（六）利用vertical-align:middle;
這方法不常見，但是一位朋友補(bǔ)充后我覺得也不失為一種好方法可以讓別人刮目相看，這個(gè)方法關(guān)鍵要有一個(gè)和容器一樣高的元素作為居中的一個(gè)參照就像b元素一樣

<style>
    .wrap{
            width:300px;
            height:300px; 
            background:rgba(0,0,0,0.5);
            text-align:center;
            font-size:0;
            }
    .vamb{
        display:inline-block; 
        width:0px;
        height:100%;
        vertical-align:middle;
        }
    .test{
        display:inline-block;
        vertical-align:middle;
        font-size:16px;
        text-align:left;
        background:red;
        }
</style>
<body>
    <div class="wrap">
        <b class="vamb"></b>
        <div class="test">
        寬高不定<br>
        垂直水平居中
        </div>
    </div>
</body>

常見又實(shí)用的例子就先寫到這，歡迎提意見，謝謝大家！喜歡請(qǐng)關(guān)注點(diǎn)個(gè)贊，也是對(duì)我的支持和鼓勵(lì)！

作者：coderLfy鏈接：https://www.jianshu.com/p/a7552ce07c88

在線咨詢

上一篇：前端學(xué)習(xí)：圖像標(biāo)簽的基本特點(diǎn)和相關(guān)屬性
下一篇：無縫滾動(dòng) HTML5

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

用extjs寫一個(gè)登錄界面

您的項(xiàng)目需求