先上效果圖：
這是一個(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 chart="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-ba.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)入頁(yè)面所需的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, baCls: '', defaults: { border: fal }, // 添加面板里面的物品 items: [ { // 第一件：logo圖 id: 'loginLogo', height: 160, frame: fal, bodyStyle: 'padding-top:10px', html: '<img src="images/fly_icon.png">' }, { // 第二件：登錄的表單 id: 'loginForm', defaultType: 'textfield', frame: fal, defaults: { allowBlank: fal }, // 添加表單里面的物品：兩個(gè)輸入框 items: [ { id: "urname", 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, baCls: '', layout: 'absolute', defaults: { border: fal }, // 添加面板里面的物品 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({ baCls: '', width: 800, height: 480, layout: 'absolute', closable: fal, draggable: fal, resizable: fal, shadow: fal, border: fal, 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)居中的效果。
本文發(fā)布于:2023-02-28 21:09:00，感謝您對(duì)本站的認(rèn)可！
本文鏈接：http://m.newhan.cn/zhishi/a/1677731377101033.html
版權(quán)聲明：本站內(nèi)容均來自互聯(lián)網(wǎng)，僅供演示用，請(qǐng)勿用于商業(yè)和其他非法用途。如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系，我們將在24小時(shí)內(nèi)刪除。
本文word下載地址：allowblank(allowblank修改不生效).doc
本文 PDF 下載地址：allowblank(allowblank修改不生效).pdf
| 留言與評(píng)論（共有 0 條評(píng)論） |
