Sencha Touch 2 -在MVC中添加监听器的正确方法

Sencha Touch 2 - Correct way to add listeners in the MVC?

本文关键字：监听器 方法 添加 Touch MVC Sencha      更新时间：2023-09-26

今天我有一个小问题，关于使用Sencha Touch 2通过推荐的MVC模型添加侦听器的正确/最佳方法是什么。

据我所知，有两种主要方法可以向视图中的各种组件添加侦听器。

1。

我在阅读ExtJS 4.0的MVC文档时遇到了这个方法(没有MVC文档的触摸)。它是这样的:

init: function() {
        console.log ('Launched the controller');
        //listening test
        //the Control function/method is unique to controllers and is used to add listeners to stuff
        this.control({
            'button': { 'tap' : function (){
                console.log('the buttons speak!');
                }
            },
}
例如，上面的代码将驻留在主控制器中。在这里，正如你所看到的，我为整个应用程序的所有按钮添加了一个"tap"监听器。

据我所知，要以这种方式访问特定的组件，我需要用唯一的ID标记每个组件，然后在此位置使用componentquery将侦听器放置到它们上。

问题:我觉得这个方法很酷…但我遇到过在列表中使用它的问题……有时我想听一个特定的列表项，比如"tapstart"answers"tapend"，但由于通常listtitems是作为列表的子元素动态创建的……我不知道如何给他们唯一的id和/或找到他们使用查询引擎(由于我的经验不足，我猜?我还没能在谷歌上找到任何有意义的文档)。

2。在单个组件的init/config中

我遇到的另一种向组件添加侦听器的方法是直接在组件配置中定义侦听器、它的回调和它侦听的事件。

的例子:

Ext.define('Paythread.view.CommentList', {
    extend: 'Ext.Panel',    
    alias: 'widget.CommentList',
    layout: 'vbox',
    config : {
        items: [    
            { 
                xtype: 'list', 
                layout: 'fit', //fullscreen: true, 
                height: 'viewport.height',
                store: 'Comments',
                onItemTap: function(){
                    //do stuff
                },
                pressedDelay: 20, //HOLY CRAP IMPORTANT FOR UX
                itemTpl: '<h1>{user_id}</h1><h2>{comment}</h2>'
            }
        ]       
    }, 
});

从这段代码中可以看到，我创建了一个"onItemTap"侦听器函数，这似乎工作得很好。然而……出于某种原因，我害怕，我不知道我所做的是否正确。

谁能提供一些帮助，我是否在做正确的事情，如果我应该做这个不同的方式，或者如果我完全偏离轨道，甚至不应该在第一个地方定义这样的听众?

我将非常感谢任何帮助!非常感谢大家。

添加侦听器的方法在我看来更清晰一些:

Ext.define('Paythread.view.CommentList', {
    extend: 'Ext.Panel',    
    alias: 'widget.CommentList',
    layout: 'vbox',
    config : {
        items: [    
            { 
                xtype: 'list', 
                layout: 'fit', //fullscreen: true, 
                height: 'viewport.height',
                store: 'Comments',
                listeners: {
                    itemtap: function() {
                        //do stuff
                    }
                }
                pressedDelay: 20, //HOLY CRAP IMPORTANT FOR UX
                itemTpl: '<h1>{user_id}</h1><h2>{comment}</h2>'
            }
        ]       
    }
});

轻击列表时将调用轻击函数。听起来很简单。希望能有所帮助，

克里斯

既然你问监听列表项上的事件，你可能应该检查:http://www.sencha.com/blog/event-delegation-in-sencha-touch

不幸的是，ST2的语法改变了一点。看看这个帖子:http://www.sencha.com/forum/showthread.php?154513-How-to-buffer-events-without-using-addListener

你必须在列表中添加itemId属性通过使用这个itemId你可以获得列表对象然后你可以添加像这样的侦听器

init: function() {
    console.log ('Launched the controller');
    //listening test
    //the Control function/method is unique to controllers and is used to add listeners to stuff
    this.control({
        Paythread.view.CommentList.query('itemIdof List')[0].on({
               itemtap: function() {
                    alert('test')
                }
              });
        },
}

这可能对你有帮助

谢谢

有几种添加侦听器的方法，我认为每种方法都有一些注意事项:

我应该把监听器放在控制器上还是放在视图上?

对我来说，这要看情况;如果视图基本上是要重用的组件，则可能希望将元素与事件联系起来。但是，您不应该将事件的逻辑放在视图上。相反，你的视图应该触发一个可以被控制器监听的事件。

的例子:

Ext.define("App.view.SomePanel", {
  extend: "Ext.form.Panel",
  xtype: "somepanel",
  config:{
      scrollable:'vertical' ,
  },
  initialize: function () {
    var backButton = {
        xtype: "button",
        ui: "back",
        text: "Home",
        handler: this.onBackButtonTap,
        scope: this
    };
    this.add([
      {
        xtype: "toolbar",
        docked: "top",
        title: "Edit Player",
        items: [ backButton ]
      }
    ]);
  },
  onBackButtonTap: function () {
      this.fireEvent("goBackCommand", this);
  }
});

在这个面板上，我们有一个后退按钮。视图不应该处理后退按钮的操作(因为它取决于应用程序的流程，而不是视图本身)，但它应该触发一个事件，我们可以在控制器上捕捉到。

您应该始终考虑的另一个非常重要的事情是侦听器的scope。基本上，作用域意味着this在事件触发的函数中具有的值。(本例中为视图本身)

希望这对你有帮助!

编辑:链接到Sencha事件指南:

http://docs.sencha.com/touch/2-0/!事件/指导/

相关文章：