Question

我有一个基本的网格面板，我在其中一个列中呈现自定义<span>元素。我试图捕获此元素上的单击事件并在控制器中处理它们。

问题是听众this内部引用了Window，所以我甚至无法发起事件。

Ext.define('MyList', {
    extend: 'Ext.grid.Panel',
    xtype: 'mylist',
    controller: 'mylist',

    listeners: {
        body: {
            click: function(e, el){
                //this.fireEvent('onTagClick');
            },
            delegate: 'span.tag',
            scope: this
        },
    },

    columns: [
        {
            text: 'Name', 
            dataIndex: 'name', 
            renderer: function(value, metaData, record){
                return '<span class="tag">tag</span>' + value;
            }
        },
    ]
});

我可以使用Ext.GlobalEvents.fireEvent()触发一个全局事件，但在重新加载网格后遇到一些奇怪的问题或重复事件调用的错误。我想看看是否有办法避免全球事件。

Answer 1

通过直接从控制器附加侦听器找到一个解决方案，this将引用控制器：

Ext.define('MyListController', {
    alias: 'controller.mylist',

    init: function(){
        this.getView().on({
            body: {
                click: function(e, el){
                    this.onTagClick(el);
                },
                delegate: 'span.tag',
                scope: this
            },
        });
    },

    onTagClick: function(el) {
        console.log("clicked", el);
    },
});

如何处理ExtJS6中控制器中的body元素事件？

1 个答案: