将ExtJS MVC控制器附加到DOM元素,而不是组件 - 代码日志

将ExtJS MVC控制器附加到DOM元素,而不是组件

有没有办法使用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选择器?还是只与组件配合使用?

我在今年的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);
    }
});

意见注释

> Extend“Ext.Component”当你想要的是一个被管理的< div>时,Ext.Panel比较重,支持诸如标题栏,工具栏,折叠等。
>在组件的DOM元素中添加侦听器时使用“受管理”侦听器(请参阅Component.mon)。组件管理的侦听器将在该组件被销毁时自动释放
>当从多个DOM元素侦听相同的事件时,使用“delegate”事件选项,并将侦听器附加到其公共父项而不是单个元素。这表现更好,让您可以任意地创建/销毁子元素,而不用担心不断地为每个孩子附加/删除事件侦听器。避免使用像.select(‘img’)这样的东西。on(‘click’,handler)
>从视图触发事件时,Sencha的约定是事件的第一个参数是范围 – 引用触发事件的视图。当从控制器处理事件时您将需要将事件处理程序的实际范围作为控制器,这是非常方便的。

样品控制器

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');
    }
});
http://stackoverflow.com/questions/6047862/attach-extjs-mvc-controllers-to-dom-elements-not-components

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:将ExtJS MVC控制器附加到DOM元素,而不是组件