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

Posted

技术标签:

【中文标题】如何使用 Sencha Touch 2.2 在控制器内的图像中添加滑动侦听器?【英文标题】:How to add a swipe listener in an image inside a Controller with Sencha Touch 2.2? 【发布时间】:2013-07-30 14:29:59 【问题描述】:

如何使用 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");
            
        );
    
);

谢谢,

【问题讨论】:

【参考方案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");
                
            
        );
    
);

【讨论】:

谢谢@kevhender!但仍然无法正常工作。由于某种原因,initialize : 'initImage' 方法没有被调用;另一方面,方法tap : 'initImage' 被调用。 嗯,如果您输入正确,不知道这有什么意义。尝试将您的 ref 更改为 houseImage: 'image' 耶!很奇怪,将 ref 更改为 houseImage: 'image' 效果很好。

以上是关于如何使用 Sencha Touch 2.2 在控制器内的图像中添加滑动侦听器?的主要内容,如果未能解决你的问题,请参考以下文章

Sencha Touch:如何更新数据存储以从控制器列出

Sencha Touch 2.2 图标不与 Base 主题一起显示

Sencha Touch :: KitchenSink :: 控制器是如何实例化的?

Sencha Touch 2:数据集成或如何在sencha和javascript之间共享动态信息

在 sencha touch 2 中加载外部 url

如何从外部控制器函数调用控制器函数,如 sencha touch 中的全局函数