【问题标题】：How to call a `refs` component inside an `initialize` method using Sencha Touch 2?如何使用 Sencha Touch 2 在`initialize` 方法中调用`refs` 组件？
【发布时间】：2013-07-31 09:37:11
【问题描述】：

我想通过使用 Sencha Touch 2 的 MVC 模式在图像中滑动来更改 xtype: 'label' 的 Html 输出。

滑动事件工作正常，即它在控制台上显示“LEFT”和“RIGHT”输出，但由于某种原因，this.getOrientationLabel().getHtml() 没有被调用。

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

【问题讨论】：

标签： model-view-controller controller initialization sencha-touch-2 refs

【解决方案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() ); 
    });
}

【讨论】：