前言
在上一次主要是搭建ext環境，本次課程主要是通過ext元件來實現登入。
開始動手
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中）：
ext.define("ext.ux.login", );3.要考慮視窗應該包含那些配置項了，視窗應是模態的，不能關閉，不能調整大小，關閉模式為隱藏，隱藏模式為偏移等，因而加入以下**：
modal: true4.在視窗的initcomponent方法內定義登入用的控制項了。一般的登入視窗都包含使用者名稱、密碼和驗證碼3個文字輸入框，還包含有顯示驗證碼的、登入和重置按鈕。因而需要用到的extjs控制項包括表單面板、、工具欄、按鈕和文字字段。下面要做的是先定義好表單，在擴充套件內加入以下**：, closable:
false
, resizable:
false
, closeaction: 'hide',
hidemode: 'offsets',
initcomponent: function**中，me的作用是將外部作用域中的this物件儲存為本地變數，這樣的好處包括，一是，如果this是window等全域性變數，就可以將全域性變數變成本地變數，提高訪問效率，二是可以讓閉包訪問該物件。這寫法在ext js檔案中始終貫穿其中，本著拿來主義的精神，好東西應該學一下。() );
me.callparent(arguments);
}
注意create方法中的物件名稱，筆者並沒有使用字串，這樣就可以直接使用物件，而不需要再去轉換表中找物件，可以提高速度。
呼叫callparent方法是必須的，不然元件執行會出問題，達不到預期效果。
5.來定義表單配置項了，**如下：
border: false, bodypadding: 5,
bodystyle: "background:#dfe9f6",
url: "account/login",7.因為表單內使用的都是文字字段，因而可以統一做一些定義，如標籤寬度為80，標籤的分隔符為中文冒號，錨固為0，都不允許為空等，**如下：
defaulttype: "textfield",8.接下來是定義欄位了，這個簡單，因為預設設定已經定義了幾個配置項，因而餘下的就只有字段標籤和名稱。驗證碼特殊點，必須是6位字元，**如下：fielddefaults: ,
items: [,,9.現在要考慮怎麼顯示驗證碼，如果直接在表單內加入image控制項，會很難控制的位置，因為最好的方式是先套乙個容器。因為img物件的例項在重新整理的時候還要用到，因而最好用乙個屬性來指向物件例項，這樣就可以通過該屬性在類的內部訪問到例項了。在建立表單的前面新增以下建立img物件例項的**：}
me.image =ext.create(ext.img, );千萬不要在建立表單後面建立，不然在表單內插入的時候就找不到物件了。
**中，驗證碼將verifycode控制器生成，這個暫時放下，會在後面討論。
10.還要實現的是單擊重新整理驗證碼，但是查api發現img物件居然沒單擊事件。沒關係，在4.1版本的ext js中，修改了事件的定義方式，可以直接為物件生成的html元素繫結事件了，只要在監聽事件中加入element配置項就行了，這相當方法。因而可在建立img例項的配置物件中加入以下**：
listeners:**中，element配置項中的el就表示要在物件生成的html元素中繫結事件，繫結事件為click事件，事件將呼叫onrefrehimage方法。方法只是簡單的重新整理，因而使用img物件的setsrc方法就可以，使用以下**順便完成onrefrehimage方法：
onrefrehimage: function**很簡單，使用setsrc方法重新整理的src就行了，加上時間戳可防止顯示快取。 從**可以看到，使用容器的作用就是可以使用fit布局來限制的尺寸，這樣布局就容易多了。 11.表單餘下的就是新增登入和重置按鈕了，**如下：()
dockeditems: [,在這裡使用了dockeditems配置項，目的一是因為介紹ext js 4的新功能，二是因為使用這個確實挺方便。**中定義了乙個工具欄，停靠位置由dock配置項決定，在這裡是底部（bottom），工具欄的樣式使用了ui配置項定義的footer，也就是原來視窗的底部頁尾工具欄，工具欄的布局將使用居中對齊方式。items: [,]
}]
登入按鈕預設為禁用的。formbind配置的作用是只有在表單內輸入符合要求時才能使用該按鈕，這個設計在ext js4也是新加入的，很方便，不再需要自己去寫**實現這個了。登入按鈕將呼叫onlogin方法。重置按鈕很簡單，只是簡單的呼叫onreset方法。
餘下要完成的是onlogin和onreset方法。先來完成簡單onreset方法，基本功能就是重置表單，並將焦點移動到第乙個文字字段，也就是使用者名稱那裡，還要重新整理驗證碼，**如下：
onreset: function**中要注意的是獲取表單中第乙個文字欄位的**，因為表單在例項化後，items屬性指向的是mixedcollection例項，因為要在其items內才能找到文字自動物件。() me.onrefrehimage();
}
接著完成的是onlogin方法，難度也不大， 就是先呼叫isvalid方法，驗證表單是否符合提交要求，然後呼叫submit方法提交。其實不呼叫isvalid也行，因為登入按鈕只要在isvalid為true時才能用。**如下：
onlogin: function登入成功（success配置項）後，會重新整理一下頁面，讓頁面寫入驗證資訊到cookie。當然，也可以跳轉到另外一頁，不過筆者認為不如這樣來得簡便，這個稍後會說到。() ,
failure:
function
() ,
scope: me
});}
}
登入失敗（failure配置項），只寫了乙個空函式的目的是因為表單的提交返回的資料格式是一樣的，處理方式也一樣，因而可使用同乙個函式進行處理，但是還沒寫到，因而先保留乙個空函式。
最後，別忘了將表單加入視窗的items裡，這個必須放在呼叫callparent之前，不如不會初始化表單，**如下：
me.items = [me.form]至此，登入視窗就暫時寫好了。
以下是完整的login.js**：
/// ext.define("ext.ux.login",
});me.form =ext.create(ext.form.panel, ,
items: [,,
,,],dockeditems: [,
items: [,]
}]});
me.items =[me.form]
me.callparent(arguments);
},onrefrehimage:
function
() ,
onreset:
function
() me.onrefrehimage();
},onlogin:
function
() ,
failure:
function
() ,
scope: me
});}
}});
extjs實現繼承
注意1 這是父類中屬性的構造方式，若放在方法體內不能被子類繼承 注意2 d是子類中新增加的屬性，若前面不加this則屬性不能被修改，個人理解可能是不加this可能不能識別到本物件內的屬性 注意3 此方法是子類呼叫父類的構造方法，把子類定製，修改或者增加的屬性傳到父類，具體怎麼傳看下面注意4 注意4 ...
ExtJS監聽鍵盤事件 回車鍵實現登入功能
首先，我們定義乙個表單，如下 ext.define demo.view.viewport items bbar 然後，對密碼框設定監聽事件，ext.define demo.controller.controller userlogin function b,e,eopts extjs鍵盤事件詳解 1...
ExtJS監聽鍵盤事件 回車鍵實現登入功能
ext.define demo.view.viewport items bbar 然後，對密碼框設定監聽事件，ext.define demo.controller.controller userlogin function b,e,eopts extjs鍵盤事件詳解 1.首先要將需要監聽的輸入框設定...