向上函数在元素的事件处理程序中不起作用

Question

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

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() 函数，有没有办法更改此代码以便我可以使用它？

Answer 1

up 在元素级别触发事件时不可用。尝试使用 Ext.ComponentQuery.query('#mainContainer')[0] 访问面板

Answer 2

为了扩展 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

向上函数在元素的事件处理程序中不起作用

Up function not working in event handler on element

extjs

extjs4

extjs4.1

extjs4.2

extjs5