extjsボタンハンドラが動作しない理由

Question

「キャンセル」をクリックした後に何も表示されないウィンドウがありますが、何も起こりません。 私は本当に私が間違って取得していますができるか困惑している：

this.cancelが定義されていないためだ

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は、フォームクラスの定義時には未定義です。

この問題の標準溶液は、initComponent内部items配列を作成することです：1が期待するようinitComponentは、フォームのインスタンスにthisポイントを呼び出される

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'); } 

}); 

。あなたのコードでthisはキャンセル機能を持​​たないグローバルwindowオブジェクトを指しています。

Answer 2

。このコードを参照してください

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(){ ... } 
... 

あなたのウィンドウのボタンを定義することができます