爲什麼extjs按鈕處理程序不起作用

Question

點擊「取消」後，我有一個包含一些按鈕的窗口什麼也沒有發生。 我真的很困惑什麼可能我得到錯誤：

Ext.define('Myapp.view.User.NewForm', { 
    extend: 'Ext.window.Window', 
    width: 610, 
    height: 380, 
    y: 50, 
    resizable: false, 
    closable: true, 
    draggable: false, 
    title: 'new user', 

    items: [{ 
     buttons: [{ 
       text: 'save', 
       iconCls: 'form-save' 
      },{ 
       text: 'cancel', 
       iconCls: 'form-cancel', 
       scope: this, 
       handler: this.cancel  
      }] 
    }], 
    cancel: function() { alert('cancel'); } 

}) 

Answer 1

就像Lolo說的那樣，this.cancel在定義Form類時是未定義的。

這個問題的標準解決方案是創建items陣列內initComponent：

Ext.define('Myapp.view.User.NewForm', { 
    ... 

    initComponent: function() { 
     this.items = [{ 
      buttons: [{ 
       text: 'save', 
       iconCls: 'form-save' 
      },{ 
       text: 'cancel', 
       iconCls: 'form-cancel', 
       scope: this, 
       handler: this.cancel  
      }] 
     }]; 

     this.callParent(); 
    }, 

    cancel: function() { alert('cancel'); } 

}); 

當initComponent調用this點到窗體的實例爲人們所期望的。在您的代碼this指向全局window對象，其中不包含取消功能。

Answer 2

這是因爲this.cancel是不確定的。請參閱此代碼：

var that = this; 
Ext.define('Myapp.view.User.NewForm', { 

    items: [{ 
     buttons: [{ 
       text: 'save', 
       iconCls: 'form-save' 
      },{ 
       text: 'cancel', 
       iconCls: 'form-cancel', 
       scope: this, // that === this 
       handler: this.cancel  
      }] 
    }], 
    cancel: function() { alert('cancel'); } 
}) 

傳遞給作用域指向與該變量相同的對象。您必須找到其他方式來獲取對父控件的引用。 您可以嘗試：handler: function(){ this.ownerCt.ownerCt.cancel.apply(this, arguments); }，並刪除scope: this一行。

Answer 3

您也可以定義你的窗口按鈕，這樣

... 
initComponent: function(){ 
this.buttons = [ 
      { text:'Close', 
       handler: function(){ 
        this.up('window').close(); //<--Notice "this" refers to the button 
       } 
      }, 
      { 
       text: 'Save', 
       action: 'save', 
       handler: this.save, 
       scope: this 
      } 
     ]; //eo buttons 
     this.callParent(arguments); 
    }, //eo initComponent 
    save: function(){ ... } 
...