向上功能在元素的事件处理程序中不起作用答案

【问题标题】：Up function not working in event handler on element向上功能在元素的事件处理程序中不起作用
【发布时间】：2016-06-23 19:59:49
【问题描述】：

下面的代码可以正常工作：

var container = Ext.create('Ext.Container', {
                    html: 'Click Me!',
                    listeners: {
                        click: {
                            element: 'el',
                            fn: function() {
                                Ext.Msg.alert('Test', 'It was clicked!');
                             }
                         }
                     }
                 });

Ext.create('Ext.panel.Panel', {
    itemId: 'mainContainer',
    renderTo: Ext.getBody(),
    border: false,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [container]
});

在这个例子中，我只是提醒一些无意义的消息，但我实际上想使用 'up()' 方法获取父容器的 itemId，但它并没有像我预期的那样工作。例如，如果我将点击处理程序更改为：

click: {
    element: 'el',
    fn: function() {
        console.log(this.up('panel'));
    }
}

然后记录'null'。为什么我不能在这里使用 up() 函数，有没有办法更改此代码以便我可以使用它？

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs4.2 extjs5

【解决方案1】：

为了扩展 Surya 的回答，事件处理程序中的 this 是引发事件的 Ext.dom.Element 实例，而不是 Ext.Container 实例。

另一种方法是使用 on 方法添加侦听器，以便您可以将处理程序的范围强制到容器实例。

container.on({
        click: {
            element: 'el',
            fn: function() {
                console.log(this.up('panel'));
            },
            scope: container
        }

    });

看看这个 Fiddle，它展示了它的实际效果：

https://fiddle.sencha.com/#fiddle/1cka

【讨论】：

【解决方案2】：

当您在元素级别触发事件时，

up 将不可用。尝试使用Ext.ComponentQuery.query('#mainContainer')[0] 访问面板

【讨论】：