前言
開始動手
1.在解決方案資料總管中選擇Scripts\ExtJS\ux目錄，單擊右鍵選擇添加，建立項，在彈出視窗中選擇Jscript檔案，并将名稱修改為login.js（以後的項目的可直接将該檔案複制到該目錄）
這裡要注意，檔案名不能用類的全名做檔案名，因為動态加載會根據類名自動找到目錄并加載檔案，類名中最後一個小數點後的名稱就是檔案名，例如，登入視窗的類全稱為Ext.ux.Login，而login就是檔案名。
如果想要在腳本中使用ExtJS的提示資訊，可将書附帶的資源包中的Ext.js檔案複制到ExtJS目錄中，複制後，在解決方案資料總管将Ext.js拖到到login.js檔案中，就會生成以下代碼：
2.現在，先把類的定義寫好，包括父類、單例模式、視窗标題、寬度和高度。視窗的标題為“Ext Js MVC登入視窗”。寬度和高度暫定為400，到時候再調整。最終代碼如下（Login.js中）：
3.要考慮視窗應該包含那些配置項了，視窗應是模态的，不能關閉，不能調整大小，關閉模式為隐藏，隐藏模式為偏移等，因而加入以下代碼：
4.在視窗的initComponent方法内定義登入用的控件了。一般的登入視窗都包含使用者名、密碼和驗證碼3個文本輸入框，還包含有顯示驗證碼 的圖檔、登入和重置按鈕。因而需要用到的ExtJS控件包括表單面闆、圖檔、工具欄、按鈕和文本字段。下面要做的是先定義好表單，在擴充内加入以下代碼：
代碼中，me的作用是将外部作用域中的this對象儲存為本地變量，這樣的好處包括，一是，如果this是window等全局變量，就可以将全局變 量變成本地變量，提高通路效率，二是可以讓閉包通路該對象。這寫法在Ext JS檔案中始終貫穿其中，本着拿來主義的精神，好東西應該學一下。
注意create方法中的對象名稱，筆者并沒有使用字元串，這樣就可以直接使用對象，而不需要再去轉換表中找對象，可以提高速度。
調用callParent方法是必須的，不然元件運作會出問題，達不到預期效果。
5.來定義表單配置項了，代碼如下：
代碼中，第一句表示不要邊框，如果喜歡帶有邊框的表單，可以把這項去掉或者修改為true。第二句表示将表單面闆向内壓縮5像素，這樣表單内的元件 就不會和視窗的内邊框粘在一起，這個可根據個人喜好設定。第三句的作用就是讓表單面闆的背景顔色和視窗融合在一起，而不是預設的白色，這還是個人喜好問 題。
6.接着加入表單面闆的送出位址，這裡定為Account/Login，就是Account控制器的Login方法，代碼如下：
7.因為表單内使用的都是文本字段，因而可以統一做一些定義，如标簽寬度為80，标簽的分隔符為中文冒号，錨固為0，都不允許為空等，代碼如下：
8.接下來是定義字段了，這個簡單，因為預設設定已經定義了幾個配置項，因而餘下的就隻有字段标簽和名稱。驗證碼特殊點，必須是6位字元，代碼如下：
9.現在要考慮怎麼顯示驗證碼圖檔，如果直接在表單内加入Image控件，會很難控制圖檔的位置，因為最好的方式是先套一個容器。因為Img對象的 執行個體在重新整理圖檔的時候還要用到，因而最好用一個屬性來指向對象執行個體，這樣就可以通過該屬性在類的内部通路到執行個體了。在建立表單的前面添加以下建立Img對 象執行個體的代碼：
千萬不要在建立表單後面建立，不然在表單内插入圖檔的時候就找不到對象了。
代碼中，驗證碼圖檔将VerifyCode控制器生成，這個暫時放下，會在後面讨論。
10.還要實作的是單擊圖檔重新整理驗證碼，但是查API發現Img對象居然沒單擊事件。沒關系，在4.1版本的Ext JS中，修改了事件的定義方式，可以直接為對象生成的HTML元素綁定事件了，隻要在監聽事件中加入element配置項就行了，這相當方法。因而可在創 建Img執行個體的配置對象中加入以下代碼：
代碼中，element配置項中的el就表示要在對象生成的HTML元素中綁定事件，綁定事件為click事件，事件将調用 onRefrehImage方法。方法隻是簡單的重新整理圖檔，因而使用Img對象的setSrc方法就可以，使用以下代碼順便完成 onRefrehImage方法：
代碼很簡單，使用setSrc方法重新整理圖檔的src就行了，加上時間戳可防止顯示緩存圖檔。
好了，可以在表單items裡加入驗證碼圖檔了，代碼如下：
<a href="http://www.cnblogs.com/aehyok/archive/2013/04/18/3028739.html">?</a>
<code>{</code>
<code> </code><code>xtype:</code><code>"container"</code><code>, height: 80, anchor:</code><code>"-5"</code><code>, layout:</code><code>"fit"</code><code>,</code>
<code> </code><code>items: [me.image]</code>
<code>}</code>
從代碼可以看到，使用容器的作用就是可以使用fit布局來限制圖檔的尺寸，這樣布局就容易多了。
還要加入一段提示資訊，告知使用者驗證碼不區分大小寫，且如果看不清楚驗證碼圖檔，可單擊圖檔重新整理驗證碼，代碼如下：
<code> </code><code>xtype:</code><code>"container"</code><code>, anchor:</code><code>"-5"</code><code>, html:</code><code>"**驗證碼不區分大小寫，如果看不清楚驗證碼，可單擊圖檔重新整理驗證碼。"</code>
11.表單餘下的就是添加登入和重置按鈕了，代碼如下：
在這裡使用了dockedItems配置項，目的一是因為介紹Ext JS 4的新功能，二是因為使用這個确實挺友善。代碼中定義了一個工具欄，停靠位置由dock配置項決定，在這裡是底部（bottom），工具欄的樣式使用了 ui配置項定義的footer，也就是原來視窗的底部頁腳工具欄，工具欄的布局将使用居中對齊方式。
登入按鈕預設為禁用的。formBind配置的作用是隻有在表單内輸入符合要求時才能使用該按鈕，這個設計在Ext JS4也是新加入的，很友善，不再需要自己去寫代碼實作這個了。登入按鈕将調用onLogin方法。重置按鈕很簡單，隻是簡單的調用onReset方法。
餘下要完成的是onLogin和onReset方法。先來完成簡單onReset方法，基本功能就是重置表單，并将焦點移動到第一個文本字段，也就是使用者名那裡，還要重新整理驗證碼，代碼如下：
代碼中要注意的是擷取表單中第一個文本字段的代碼，因為表單在執行個體化後，items屬性指向的是MixedCollection執行個體，因為要在其items内才能找到文本自動對象。
接着完成的是onLogin方法，難度也不大， 就是先調用isValid方法，驗證表單是否符合送出要求，然後調用submit方法送出。其實不調用isValid也行，因為登入按鈕隻要在isValid為true時才能用。代碼如下：
登入成功（success配置項）後，會重新整理一下頁面，讓頁面寫入驗證資訊到Cookie。當然，也可以跳轉到另外一頁，不過筆者認為不如這樣來得簡便，這個稍後會說到。
登入失敗（failure配置項），隻寫了一個空函數的目的是因為表單的送出傳回的資料格式是一樣的，處理方式也一樣，因而可使用同一個函數進行處理，但是還沒寫到，因而先保留一個空函數。
最後，别忘了将表單加入視窗的items裡，這個必須放在調用callParent之前，不如不會初始化表單，代碼如下：
至此，登入視窗就暫時寫好了。
以下是完整的Login.js代碼：