events - 如何使用 Sencha Touch 2.2 在控制器内的图像中添加滑动侦听器？

Question

如何使用 MVC 架构模式在 Controller 内的图像中添加滑动侦听器？现在我通过在我的视图上添加一个监听器来做到这一点，如下所示，

MyView.js

itemId: 'houseImage',
xtype: 'image',
src: 'resources/img/house.png',
width: 225,
height: 180, 
  listeners: {
    initialize: function(c) {
      this.element.on({
      swipe: function(e, node, options) {
         if(e.direction == "left") {
             alert("left");
         } else if(e.direction == "right"){
             alert("right");
         } 
      }
    }
  });
}

现在我想利用 MVC 模式将监听器放在控制器上。问题是 xtype: 'image' 上没有事件 'swipe' 所以我不知道我必须调用哪个事件来继承 swipe。我认为这样的事情可能会奏效，

MyController.js

Ext.define('StromRechner.controller.Settings', {
    extend: 'Ext.app.Controller',
        
    config: {
        refs: {
            houseImage: '#houseImage',
        },
        control: {
            'myview image':{
            swipe: 'swipeImage'
        } 
    }
},
swipeImage: function(){
    this.getHouseImage().on({
        swipe: function(e, node, options){
            if(e.direction == "left") {
                alert("Hey! I swipe left");
            } else if(e.direction == "right"){
                alert("Hey! I swipe right");
            }
        });
    }
});

谢谢，

Answer 1

您将需要做您现在正在做的事情，但只需将该initialize侦听器移动到控制器：

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

    config: {
        refs: {
            houseImage: 'image'  //edited - '#houseImage' was not working
        },
        control: {
            'houseImage':{
                initialize: 'initImage'
            }
        }
    },
    initImage: function(img){
        img.element.on({
            swipe: function(e, node, options){
                if(e.direction == "left") {
                    alert("Hey! I swipe left");
                } else if(e.direction == "right"){
                    alert("Hey! I swipe right");
                }
            }
        });
    }
});