3

クリックしても ExtJS ボタンのハンドラーが呼び出されません。コードは次のようになります。

Ext.define('EDS.view.selector.Container', {
    extend: 'Ext.form.Panel',
    alias : 'widget.selectorcontainer',

    title: 'Selector_V2',
    renderTo: 'input-div',
    layout: 'fit',
    height: '100%',

    items: [
            {
                xtype: 'tabpanel',
                defaults: {
                    bodyPadding: 10
                },
            }
    ],
    buttons: [
        {
            text: 'Reset',
            handler: function(){
                console.log("Reset");
                this.up('form').getForm().reset();
            }
        },
        {
            text: 'Add to constrain',
            handler: this.addConstrain,
        }
    ],

    /*
     * Logic for button "Add to constrain"
     * 
     * Adds an entry into the constrain list describing a person, cost center or an application
     */
    addConstrain: function(button, event){
        console.log('Add_to_constrain clicked');
    }
});

もともと、この「selectorcontainer」は私の app.js に直接入れられました。しかし、私はそれをスタンドアロン ビューに抽出しました。抽出前は完璧に機能していましたが、現在は機能していません。

ところで、2 つのボタンがあり、最初の「リセット」は正常に機能します。そこで、スコープ関連の「this.addConstrain」に何か問題があるのではないかと考えています。

4

2 に答える 2

5

そうです、それはスコープの問題です- this定義しているクラスではありません。関数が呼び出されたときのスコープExt.defineです（おそらくwindow）。これを処理するにはいくつかの方法があります。（私の意見では）最も簡単なのは、ハンドラーをリセットハンドラーと同様に動作するように変更することです。

{
    text: 'Add to constrain',
    handler: function(btn, e) {
       //'this' is now the button
       this.up('selectorcontainer').addConstrain(btn, e);
    }
}

initComponentボタンを構成の一部として定義する代わりに、機能の一部としてボタンを追加することもできますExt.define。

initComponent: function() {
    //'this' is now the selector container
    this.buttons = [{
        text: 'Reset',
        handler: function(){
            console.log("Reset");
            this.up('form').getForm().reset();
        }
    }, {
        text: 'Add to constrain',
        handler: this.addConstrain
    }];

    this.callParent();
}
于 2013-08-20T02:17:30.307 に答える
4

クラスを設計する適切な方法は次のとおりです。callParent を実行する前に、構成設定をオブジェクトに適用します。

Ext.define('EDS.view.selector.Container', {
    extend: 'Ext.form.Panel',
    alias : 'widget.selectorcontainer',

    title: 'Selector_V2',
    renderTo: 'input-div',
    layout: 'fit',
    height: '100%',

    initComponent: function() {

        Ext.applyIf(this, {

           items: [
               {
                   xtype: 'tabpanel',
                   defaults: {
                      bodyPadding: 10
                   }
               }
           ],
           buttons: [
               {
                  text: 'Reset',
                  scope: this,                 // <--- scope to form panel
                  handler: function(){
                     console.log("Reset");
                     this.getForm().reset();
                  }
               },
               {
                   text: 'Add to constrain',
                   scope : this,               // <--- scope to form panel
                   handler: this.addConstrain
               }
           ]
       });

       this.callParent(arguments);

  }
  /*
   * Logic for button "Add to constrain"
   * 
   * Adds an entry into the constrain list describing a person, cost center or an      application
   */
   addConstrain: function(button, event){
      console.log('Add_to_constrain clicked');
   }
});
于 2014-01-22T00:15:59.830 に答える