extjs官方登錄例程翻譯

1、譯者：夜空中最亮的星譯者注：說實(shí)話，我英語4級都沒過，翻譯這片文章，是希望通過這篇文章，幫助英文更差的朋友熟悉extjs6開發(fā)一個(gè)MVVM模塊的過程，體會extjs官方的開發(fā)思路。我接觸extjs不到兩周，翻譯不周之處在所難免。期間經(jīng)常得到群主阿托和木人的幫助，不勝感激。第一步：新建一個(gè)工程群主阿托在博客上已經(jīng)將的很詳細(xì)了，大家參考第二步：創(chuàng)建登錄模塊的文件結(jié)構(gòu)瀏覽一下我們創(chuàng)建的TutorialApp工程：進(jìn)到工程的app/view文件夾，可以看到默認(rèn)生成的main文件夾。這個(gè)文件夾里保存了三個(gè)文件：Main.js, MainController.js, MainModel

2、.js為了實(shí)現(xiàn)登錄功能，我們需要在app/view文件夾下新建一個(gè)login文件夾，在login文件夾下再新建兩個(gè)js文件：最后的文件結(jié)構(gòu)是這的：第三步：在app.js中配置mainView為 “TutorialApp.view.main.Main”是一種實(shí)現(xiàn)Viewport Plugin效果的快捷方式。但是，在 Ext.application的 launch（）方法中，卻可以做一些更有價(jià)值的事情，因?yàn)樵摲椒ǖ恼{(diào)用時(shí)機(jī)是默認(rèn)視圖生成之前。在這個(gè)例子中，如果游客始終都沒有登錄，那應(yīng)用完全有理由在整個(gè)過程中都不創(chuàng)建主窗口。正是由于這個(gè)原因，我們需要移除app.js中的mainV

3、iew配置。說明：如果現(xiàn)在刷新應(yīng)用，將顯示空白頁，因?yàn)闆]有任何類被實(shí)例化。譯者注：在mainView配置視圖，默認(rèn)會使用全屏插件，換句話說，如果 “TutorialApp.view.main.Main”不在mainView中配置，你又想全屏顯示，就要在 “TutorialApp.view.main.Main”類中手動加入Viewport Plugin。第四步：創(chuàng)建登錄窗口接下來，創(chuàng)建登錄模塊的視圖。打開文件，在里面定義登錄窗口類。自定義的Login類擴(kuò)展了Ext.window.Window類，又加入了一些具體的配置，下面對上面的各個(gè)配置項(xiàng)作出說明：該屬性保證登錄窗口生成實(shí)例

4、的時(shí)候，需要的類已經(jīng)加載完畢。在requires中加入LoginController.js是為了給窗口提供邏輯；加入Ext.form.Panel是為了在登錄窗口中使用了表單。這里的controller指的就是MVVM中的ViewController，controller對應(yīng)的視圖會保存controller實(shí)例的引用。登錄視圖以及其子項(xiàng)的事件回調(diào)函數(shù)都定義在viewController中。在這里我們提前給登錄視圖的控制器起了個(gè)別名，叫l(wèi)ogin。就是個(gè)css樣式。譯者注：紅色框和藍(lán)色框是我畫上去的。兩個(gè)框之間的距離是10px。標(biāo)題，我把標(biāo)題改成“用戶登錄”了。窗口默認(rèn)是帶關(guān)閉按鈕的，不想游客把登

5、錄窗口關(guān)掉，你就要把登錄窗口的關(guān)閉按鈕去掉。窗口默認(rèn)被隱藏。如果把a(bǔ)utoShow設(shè)置為true，窗口實(shí)例化后立刻顯示。還以一種辦法也可以讓窗口顯示：在窗口的實(shí)例化后立刻調(diào)用show（）方法。由于是登錄窗口，需要收集用戶信息，因此給窗口添加了表單面板，并給表單面板增加以下子項(xiàng)：兩個(gè)文本區(qū)，一個(gè)顯示區(qū)和一個(gè)確定按鈕。最終的代碼如下：再說下新增的配置項(xiàng)：需要給容器增加子項(xiàng)，就使用items配置項(xiàng)。items接收組件對象或是組件數(shù)組，items增加的組件服從其父容器的布局方案。每一個(gè)組件都有xtype屬性，可以當(dāng)它是創(chuàng)建組件的一個(gè)快捷方式。給登錄窗口創(chuàng)建一個(gè)子項(xiàng)，并設(shè)置xtype為form，就等同在

6、登錄窗口內(nèi)部實(shí)例化了一個(gè)表單面板。在這里使用表單面板而不是其他面板，理由是表單面板更適合排列輸入框和按鈕。這里我們嵌套了更深層次的items，窗口的items是表單面板，表單面板的items是幾個(gè)輸入框和按鈕。接著設(shè)置了輸入框的標(biāo)簽和驗(yàn)證策略，標(biāo)簽分別為username和password（譯者改成了用戶名和密碼），而驗(yàn)證策略是，不能為空，為空則不能提交。需要注意：設(shè)置password輸入框類型為password，這樣在游客輸密碼的時(shí)候，輸入的密碼顯示成一個(gè)個(gè)的小黑點(diǎn)兒。最后設(shè)置了一個(gè)文本提示區(qū)，提示用戶輸入出現(xiàn)的問題。在本例中，提示用戶，只要在密碼框隨便輸點(diǎn)兒什么字符，就可以點(diǎn)擊提交按鈕了。表

7、單面板的最后一項(xiàng)是按鈕數(shù)組，在數(shù)組中，只有一個(gè)按鈕。把按鈕以數(shù)組的形式賦給buttons，可以很方便實(shí)現(xiàn)在面板的底邊添加工具條。本例中，按鈕上面寫著“Login”字樣（譯者已改為登錄），該按鈕用來提交表單。buttons內(nèi)部配置formBind為true。意味著，該按鈕會檢測所在表單的驗(yàn)證項(xiàng)是否都已通過，只有所有驗(yàn)證項(xiàng)都通過后，按鈕才切換為“可點(diǎn)擊”狀態(tài)。listeners屬性配置了按鈕的事件以及觸發(fā)事件后的回調(diào)方法。在本例中，游客一旦點(diǎn)擊了按鈕，程序就會調(diào)用名為onLoginClick的事件處理方法。該方法將被定義在登錄窗口的控制器中。說明：目前我們?nèi)匀粵]有實(shí)例化登錄窗口，刷新應(yīng)用還是看不到

8、任何東西。第五步：加入登錄邏輯與登錄視圖相關(guān)的所有事件回調(diào)方法都寫在這個(gè)文件里。以下是該文件的全部代碼：如果你在看完下面章節(jié)講到launch（）方法后，再來回顧上面的代碼，便會發(fā)現(xiàn)LoginController.js竟然用了這么小的篇幅就實(shí)現(xiàn)了那么有意義的功能?。ㄗg者注：原文作者意在強(qiáng)調(diào)使用MVVM模式，在ViewController中只要書寫很少的代碼，就可處理事件。）下面是對上面代碼的說明：首先，創(chuàng)建了名叫onLoginClick的方法。該方法對應(yīng)著登錄視圖中按鈕的點(diǎn)擊事件。正如上面注釋中提到的，在該方法中你需要訪問服務(wù)器來驗(yàn)證用戶身份信息的合法性。表單內(nèi)容將以AJAX或REST請求發(fā)送給

9、服務(wù)器。在瀏覽器端，只要用戶輸入的信息格式正確，就要提交服務(wù)器端驗(yàn)證，而驗(yàn)證的結(jié)果無非是成功和失敗。成功則要跳轉(zhuǎn)到代碼的剩余部分，失敗則讓用戶重新登錄。程序使用了localStorage來保存游客的登錄狀態(tài)，登錄成功的游客有權(quán)訪問主界面。保存在localStorage中的是一個(gè)“鍵值對”，程序檢測該鍵值對是否存在來判斷用戶是否通過服務(wù)器端驗(yàn)證。存在則在launch（）方法中設(shè)置TutorialLoggedIn為true并保存到localStorage中。在視圖控制器內(nèi)部，使用了非常有用的一個(gè)方法-getView（）。該方法返回被調(diào)用的控制器對應(yīng)的視圖。本例中，getView（）返回登錄窗口。由

10、于用戶已經(jīng)成功登錄了，程序就沒有必要保留登錄窗口了。我們使用this.getView().destroy()獲得登錄窗口的引用并銷毀它（譯者注：釋放無用內(nèi)存）。在銷毀登錄窗口后，程序立刻創(chuàng)建了Main視圖的操作。這里的Main視圖，就是利用sencha cmd創(chuàng)建的路徑下的Main.js文件。第六步：在Application.js中加入啟動邏輯Application.js 文件是你應(yīng)用 的核心。在Application.js 文件的同級目錄還有view、store、model三個(gè)文件夾。Application.js中提供了一個(gè)叫l(wèi)aunch的方法，該方法在你應(yīng)用程序依賴的類加載完畢后立刻調(diào)用。

11、把處理游客登錄的代碼寫到這里，顯然再合適不過了?？纯瓷厦娴拇a做了些什么：在launch（）函數(shù)中，程序要判斷跳轉(zhuǎn)到登錄界面還是主界面，不論跳轉(zhuǎn)到哪個(gè)界面，都應(yīng)該保證跳轉(zhuǎn)前，界面類已經(jīng)加載完畢。launch（）方法在前邊已經(jīng)講的夠多的了。需要注意的就一點(diǎn)兒，該方法的調(diào)用時(shí)機(jī)。在該步，程序從localStorage中取出鍵名為TutorialLoggedIn的鍵值，然后把鍵值賦給loggedIn變量。如果鍵值不存在，loggedIn自然為空，如果鍵值存在，則該值就是之前我們在LoginController.js 中放進(jìn)去的值。利用一個(gè)三目運(yùn)算符決定創(chuàng)建登錄窗口還是主窗口。第七步：加入Viewpo

12、rt Plugin和注銷按鈕還記得上面我們刪除了app.js中mainView的配置嗎？由于我們沒有定義Viewport，所以Main視圖不知道該顯示到什么地方。我們要給Main視圖加入viewport plugin，讓該插件將Main視圖設(shè)為應(yīng)用的視圖。這種情況下的Main視圖會占用瀏覽器所有能用的空間。下Main.js中加入下面的配置：應(yīng)用還應(yīng)該在導(dǎo)航條上增加一個(gè)注銷按鈕。我們決定把該按鈕放在tab面板的頭部，保證不論tab面板如何切換，始終能夠點(diǎn)擊到這個(gè)按鈕。注銷按鈕監(jiān)聽click事件，并且調(diào)用接下來將要配置的onClickedButton事件處理函數(shù)。Main.js代碼如下：、第八步：加入主視圖邏輯幾乎就要完成了！剩下的所有工作只有編寫用戶注銷方法了。在該方法內(nèi)，程序刪除了保存在localStorage的TutorialLoggedIn鍵值對。把該方法加入即可。該方法的名字叫onClic