model-view-controller - How to call a `refs` component inside an `initialize` method using Sencha Touch 2?

Question

I would like to change the Html output of a xtype: 'label' by swiping in an image using the MVC pattern of Sencha Touch 2.

The swipe event works fine, i.e. it shows the "LEFT" and "RIGHT" output on the console but for some reason the this.getOrientationLabel().getHtml() doesn't get called.

MyView.js

xtype: 'label',
itemId: 'orientationLabel',
html: 'S',
cls: 'txt-left-style',
margin: '5 0 -30 20',
style: 'color:#e42518',
flex: 1 

MyController.js

Ext.define('StromRechner.controller.Settings', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        houseImage: 'image',
        orienLabel: '#orientationLabel'
    },
    control: {
        'houseImage':{
            initialize: 'initImage'
        }
    }
 },
 initImage: function(image){   
    image.element.on({
        swipe: function(e, node, options){
            if (e.direction == "left"){
                console.log("LEFT");
            }else if (e.direction == "right"){
                console.log("RIGHT");
            }
            console.log( this.getOrientationLabel().getHtml() ); // <- not working
        }
    });
  },    
});

Answer 1

您需要为事件侦听器指定适当的范围，或者为this闭包外部指定一个变量，然后在闭包内访问该变量。

选项1：

initImage: function(image){
    image.element.on('swipe', function(e, node, options){
        if (e.direction == "left"){
            console.log("LEFT");
        }else if (e.direction == "right"){
            console.log("RIGHT");
        }
        console.log( this.getOrientationLabel().getHtml() ); 
    }, this);
}

选项 2：

initImage: function(image){
    var me = this;
    image.element.on('swipe', function(e, node, options){
        if (e.direction == "left"){
            console.log("LEFT");
        }else if (e.direction == "right"){
            console.log("RIGHT");
        }
        console.log( me.getOrientationLabel().getHtml() ); 
    });
}