19

有没有办法使用 Ext.app.Controller control() 方法，但传入一个 DOM 查询？我有一个包含标准链接的页面，并且希望向它们添加点击处理程序，即使它们不是作为 Ext 按钮创建的。

我试过了

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

    init: function() {
        console.log("init");
        this.control({
            'a': {
                click: this.changeTab
            }   
        });
    },

    changeTab: function() {
        alert("new tab!");
    }   
});

但是点击链接不会触发警报。

有没有办法用 this.control 指定 CSS 选择器？或者它只适用于组件？

4

5 回答 5

39

我在今年的 SenchaCon 上问了这个问题，Sencha 开发人员表示他们的意图是 DOM 侦听器应该附加到您的视图中，并且视图应该将它们抽象为更有意义的组件事件并重新触发它们。

例如，假设您正在创建一个名为 UserGallery 的视图，该视图显示了一个人脸网格。在您的 UserGallery 视图类中，您将侦听<img>标签上的 DOM 单击事件以接收事件和目标，然后该视图可能会触发一个名为“userselected”的组件事件并传递被单击用户的模型实例而不是 DOM 目标.

最终目标是只有您的视图应该关注界面事件和 DOM 元素等事情，而应用程序级控制器只处理有意义的用户意图。您的应用程序和控制器代码根本不应该与您的标记结构或接口实现耦合。

示例视图

Ext.define('MyApp.view.UserGallery', {
    extend: 'Ext.Component'
    ,xtype: 'usergallery'

    ,tpl: '<tpl for="users"><img src="{avatar_src}" data-ID="{id}"></tpl>'

    ,initComponent: function() {
        this.addEvents('userselected');

        this.callParent(arguments);
    }

    ,afterRender: function() {
        this.mon(this.el, 'click', this.onUserClick, this, {delegate: 'img'});

        this.callParent(arguments);
    }

    ,onUserClick: function(ev, t) {
        ev.stopEvent();

        var userId = Ext.fly(t).getAttribute('data-ID');

        this.fireEvent('userselected', this, userId, ev);
    }
});

视图注释

  • 当你想要的只是一个托管时扩展“Ext.Component” <div>，Ext.Panel 要支持标题栏、工具栏、折叠等内容要重得多。
  • 在将侦听器附加到组件中的 DOM 元素时使用“托管”侦​​听器（请参阅 Component.mon）。组件管理的监听器会在组件被销毁时自动释放
  • 当从多个 DOM 元素侦听相同事件时，使用“委托”事件选项并将侦听器附加到它们的公共父级而不是单个元素。这表现得更好，让您可以任意创建/销毁子元素，而不必担心不断地将事件侦听器附加/删除到每个子元素。避免使用类似的东西.select('img').on('click', handler)
  • 当从视图触发事件时，Sencha 的约定是事件的第一个参数是scope——对触发事件的视图的引用。当从控制器处理事件时，这很方便，您需要将事件处理程序的实际范围作为控制器。

样品控制器

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

    ,init: function() {
        this.control({
            'usergallery': {
                userselected: function(galleryView, userId, ev) {
                    this.openUserProfile(userID);
                }
            }   
        });
    }

    ,openUserProfile: function(userId) {
        alert('load another view here');
    }
});
于 2012-01-04T20:11:18.257 回答
3

我找到了解决这个问题的方法。它并不像人们希望的那样直接，但它会将您所有的“动作”代码留在控制器中。

要求：将页面的 html 部分包装在一个实际的Ext.Component. 无论哪种方式，情况都可能如此。例如，您可能有一个包含 HTML 的简单视图，如下所示：

Ext.define('app.view.myView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myView',
    title: 'My Cool Panel',
    html: '<div><a href="#">This link will open a window</a></div><br /> <label for="myInput">Type here: </label><input name="myInput" type="text" value="" />',
    initComponent: function(){
        var me = this;
        me.callParent(arguments);
    }
});

然后在控制器中，您使用afterrender事件将侦听器应用于您的 DOM 元素。在下面的示例中，我说明了链接（一个元素）和输入元素：

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

    init: function() {
        this.control({
            'myView': {
               afterrender: function(cmp){
                    var me = this; //the controller
                    var inputs = cmp.getEl().select('input'); // will grab all DOM inputs
                    inputs.on('keyup', function(evt, el, o){
                        me.testFunction(el); //you can call a function here
                    });

                    var links = cmp.getEl().select('a'); //will grab all DOM a elements (links)
                    links.on('click', function(evt, el, o){ 
                        //or you can write your code inline here
                        Ext.Msg.show({
                            title: 'OMG!',
                            msg: 'The controller handled the "a" element! OMG!'
                        });
                    });
                }
            }   
        });
    },
    testFunction: function(el) {
        var str = 'You typed ' + el.value;
        Ext.Msg.show({
            title: 'WOW!',
            msg: str
        });
    }   
});

有了它，在控制器中处理的 DOM 元素并遵守 MVC 架构！

于 2011-09-23T21:36:02.083 回答
1

不，这似乎是不可能的。Ext.EventBus 监听 ExtJS 组件触发的事件。您的标准 DOM 元素不会触发这些事件。此外，查询使用 ExtJS 组件 is(String selector) 方法进行检查，DOM 元素不能调用该方法。如果我错了，有人可能会纠正我，但我很确定这是不可能的，不幸的是。

于 2011-05-20T10:45:23.973 回答
0

我也有一个解决这个问题的解决方案。无论如何，我都会使用这种技术，因为它还有其他好处：我创建了一个应用程序范围的消息传递总线。它是我的应用程序中的一个对象，它扩展了 Observable，并定义了一些事件。然后我可以从我的应用程序中的任何地方触发这些事件，包括 html a 链接。任何想要监听这些事件的组件都可以中继它们，并且它们会像从该组件中触发一样触发。

Ext.define('Lib.MessageBus', {
    extend: 'Ext.util.Observable',

    constructor: function() {
        this.addEvents( 
                  "event1",
                  "event2"
                 );
        this.callParent(arguments);
    }
});

然后，每个其他组件可以在初始化后添加：

this.relayEvents('Lib.MessageBus', ['event1','event2']);

然后听那些事件。您可以通过以下方式触发任何事件：

Lib.MessageBus.fireEvent('event1', 'param a', 'param b')

你可以从包括 html 链接在内的任何东西中做到这一点。

将事件从应用程序的一个部分触发到另一部分非常方便。

于 2013-03-18T14:46:01.450 回答
0

我最近遇到了同样的问题（将 mvc 与一些非组件混合）。只是想我会把这个作为答案，因为它看起来很简单并且对我有用:)

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

    init: function() {
        console.log("init");
        this.control({
           /* 'a': {
                click: this.changeTab
            } */  
        });

    var link = Ext.dom.Query.selectNode('a');

    Ext.get(link).on('click', this.changeTab);

    },

    changeTab: function() {
        alert("new tab!");
    }   
});
于 2013-08-21T11:50:55.037 回答