ハンドラからSencha Touch JavaScript設定オブジェクトのメソッドにアクセスできないのはなぜですか?

これはおそらくJavaScriptスコープの理解が不足していますが、なぜボタンを押したときにPanel items要素内からthis.onLoginTap()にアクセスできないのでしょうか。私はthis.onLoginTapが存在しないことを示すエラーを受け取ります。今の私の解決策は、項目の宣言をinitComponentメソッドに移動することですが、なぜこのメソッドにアクセスできないのだろうかと疑問に思っています。

ありがとう、

フィリップ

app.myView = Ext.extend(Ext.Panel, {       
    fullscreen: true,
    scroll: 'vertical',
    layout: {
        type: 'vbox'
    },        

    items: [{
            layout: {
                type: 'hbox'
            },
            items: [ {
                xtype: 'button',
                text: 'Log In',
                ui: 'confirm',
                handler: function() {
                   this.onLoginTap();//this.onLoginTap is undefined here at runtime.
                }
            }]
        }],

       //Controller Dispatchers
        onLoginTap: function() {
            console.log('onLoginTap');
        },

        initComponent: function() {
            app.myView.superclass.initComponent.apply(this, arguments);
        }                
    });

    Ext.reg('myView', app.myView); 
1

2 答え

"this"ポインタは実際に実行の瞬間にボタンを指していません。

しかし、最も重要なのは、ここにいくつかの解決策があります。

解決手段1:

Check the documentation for the handler: http://docs.sencha.com/touch/1-1/#!/api/Ext.Button-cfg-handler

ハンドラ関数から実際のボタンインスタンスを取得できることがわかります:

handler: function(button, event) {
    var parent = button.ownerCt;//get your main panel, the owner of the button
    parent.onLoginTap();
}

私はコードをテストしていませんが、基本的な考え方は明らかです。

解決手段2:

  • Remove the handler from the config
  • Assign the handler in initComponent:

    //Get the button and add a listener to it:
     this.items.get(0).addListener('tap', this.onLoginTap);
    

解決手段3:

ソリューション2と同じですが、コントローラー内からハンドラー/リスナーを割り当てます。 コントローラはパネル/ビューを管理するので、すべてのロジックをまとめてバインドするのが理にかなっています。

3
追加された
返信いただきありがとうございます。解決策1は機能しないので、私は依然としてスコープの質問に困惑しています。私はそれを試み、button.ownerCtにはメソッドが含まれていません。しかし、ソリューション2と3は合理的ですが、個人的には、uiコンポーネントが定義されている場所にハンドラコールを添付して、何が起こっているのかがわかります。しかし、私はこれに説得するためにオープンしています;-)これについてもう少し考える必要があります...もう一度ありがとう。
追加された 著者 Philip Murphy,

あなたはこれを試しましたか?

items: [ {
            xtype: 'button',
            text: 'Log In',
            ui: 'confirm',

            handler: function() {
               this.up('panel').onLoginTap();//this.onLoginTap is undefined here at runtime.
            }
        }]

編集:ちょうど同じ状況が発生しました - 私のMVCの設定と私のボタンはformpanelです。私はthis.up( 'formpanel')を使ってメインビューにアクセスすることができたので、上記のことがうまくいくかもしれません(私はボタンでスコープを設定しませんでした。

1
追加された
@PhilipMurphyあなたが間違っているワイヤーを持っているよりも。ハンドラconfigはボタンのタップイベントを呼び出します。 Senchaのドキュメントでは、タップイベント内の「this」がボタン自体を参照していることがはっきりと示されています。 Yashuaのコードはうまくいくはずです。しかし、代わりに "this.parent.onLoginTap()"を試して、それがうまくいくかどうかを確認することができます。
追加された 著者 PhillipKregg,
いいえ、「これはDOMWindowを指し、実際のビュークラスではありません。フィードバックをお寄せいただきありがとうございます。
追加された 著者 Philip Murphy,