How to add a swipe listener in an image inside a Controller with Sencha Touch 2.2?

Question

How can I add a swipe listener in an image inside a Controller using the MVC architecture pattern? Right now I am doing this by adding a listener on my View like below,

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

Now I would like to take advantage of MVC pattern putting the listener on the Controller. The problem is that the xtype: 'image' doesn't have an event 'swipe' on it so I don't know which event do I have to call that inherits from swipe. I thought something like this may could work,

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

Thanks,

Answer 1

You will need to do what you're doing now, but just move that initialize listener to the controller:

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