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

You need to specify the proper scope for the event listener, or specify a variable for this outside the closure that you then access within the closure.

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

Option 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() ); 
    });
}