Posted on 2009-07-17 23:31
月下孤城 閱讀(2382)
評論(6) 編輯 收藏 所屬分類:
extjs
近期一個項目前臺采用了extjs框架，經過一段時間的編碼，對extjs面向對象也有了一定的了解。以下通過FormPanel擴展對表單對象中常用代碼段進行了通用提取，并以此實踐ext面向對象的繼承，希望對剛接觸的朋友有所幫助。
1.實現類構造方法:
1
/**//*
2
* 默認表單類
3 * add by daiqiang
4
* */
5Ext.ux.DefaultFormPanel = function(config){
6
/*FormPanel submit按鈕url*/
7 this.subBtnUrl = config.subBtnUrl;
8
/*submit按鈕url提交參數*/
9 this.subBtnParams = config.subBtnParams?config.subBtnParams:
{};
10 /*submit提交完成后回調方法*/
11 this.subBtnCallbackFun = config.subBtnCallbackFun;
12 /*submit 顯示文本*/
13 this.subBtnText = config.subBtnText? config.subBtnText:'保存';
14 /*
15 * 重置按鈕定制方法
16 * 【主要針對表單狀態為'修改'(非'新增')時,
17 * 提交表單數據可能含隱藏字段,
18 * 若用reset方法將把隱藏字段值也一并清掉。
19 * 考慮這種情況需自定義表單重置方法】
20
* */
21 this.resetBtnFun = config.resetBtnFun;
22
23 Ext.ux.DefaultFormPanel.superclass.constructor.call(this, config);
24}
實現類構造方法中先初始化屬性變量，然后調用繼承類的構造方法，實現構造方法的繼承擴展。
2.使用Ext.extend方式實現父類方法、屬性的繼承擴展.
1Ext.extend(Ext.ux.DefaultFormPanel,Ext.form.FormPanel,{
2 frame:true,
3 defaultType: 'textfield',
4 labelAlign:'right',
5 bodyStyle:'padding:5px 5px 0',
6 layout : 'form',
7 buttonAlign : 'center',
8 autoHeight:true,
9 initComponent:function(){
10 /*初始化提交、重置按鈕*/
11 var oprBtns = [
12 {
13 text :this.subBtnText,
14 id:'subFormBtn',
15 handler :function(){
16 this.getForm().submit({
17 url:this.subBtnUrl,
18 params:this.subBtnParams,
19 clientValidation: true,
21 method:'post',
22 success:function(form, action){
23// Ext.Msg.alert("Success", action.result.msg);
24 Ext.Msg.alert("信息", action.result.msg);
25 //執行回調函數
26 if(this.subBtnCallbackFun){
27 this.subBtnCallbackFun(this);
28 };
29 }.createDelegate(this),
30 failure: function(form, action){
31 switch (action.failureType){
32 case Ext.form.Action.CLIENT_INVALID:
33// Ext.Msg.alert("Failure", "Form fields may not be submitted with invalid values");
34 Ext.Msg.alert("錯誤", "提交的表單數據無效,請檢查!");
35 break;
36 case Ext.form.Action.CONNECT_FAILURE:
37// Ext.Msg.alert("Failure", "Ajax communication failed");
38 Ext.Msg.alert("錯誤", "服務器連接失敗,請稍后再試!");
39 break;
40 case Ext.form.Action.SERVER_INVALID:
41// Ext.Msg.alert("Failure", action.result.msg);
42 Ext.Msg.alert("錯誤", action.result.msg);
43 }
44 }.createDelegate(this)
45 });
46 }.createDelegate(this)
47 },
48 {
49 text:'重置',
50 id:'resetFormBtn',
51 handler:function(){
52 if(this.resetBtnFun){
53 this.resetBtnkFun(this);
54 }else{
55 this.getForm().reset();
56 }
57 }.createDelegate(this)
58 }
59 ];
60
61 if(this.buttons){
62 for(var i=0;i<oprBtns.length;i++){
63 this.buttons.push(oprBtns[i]);
64 }
65 }else{
66 this.buttons = oprBtns;
67 }
68
69 Ext.ux.DefaultFormPanel.superclass.initComponent.apply(this, arguments);
70 }
71})
Ext.
extend(
Function subclass,
Function superclass,
[Object overrides] )，參數分別對應'子類對象','父類對象','覆蓋擴展父類方法屬性'。
2-8行是對FormPanel的默認設置。接下來就是對ext 組件方法initComponent的覆蓋實現(
了解ext組件生命周期詳情點這里),該方法中主要實現默認的提交、重置
按鈕操作。注意在29行代碼success屬性方法后加了個createDelegate(this)方法，這主要是success方法中引用了類屬性this.subBtnCallbackFun,而success方法中的scope(域)
和當前類的scope不同，故通過
Function類中的
createDelegate轉化到當前域中。處理完自定義操作后別望了回調父類該方法，完成FormPanel的初始化工作。
3.調用代碼片段
代碼執行后會彈出一個包含'新增','重置'按鈕表單的窗口.點擊新增按鈕后會執行一系列流程:表單效驗通過->發送subBtnUrl到后臺接受數據->后臺數據接受調用回調方法，最后alert('回調方法');提示一個表單新增操作完成。
---------------------
月下孤城
mail:eagle_daiqiang@sina.com