它适用于JQuery：

Question

我想要做的就是处理extJS面板上的点击。

我已尝试了this question上的所有建议以及我在其他地方找到的所有建议，但每个建议都失败以下述方式。

将单击事件处理程序添加到extJS面板的正确语法是什么？

[编辑：为了以后可能会发现此问题的其他人，我会在内联添加一些评论，以便更容易解读 - @ bmoeskau]

不执行处理程序：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        click: function() {
            alert('ok');
        }
    }
});

[编辑：click不是小组活动]

不执行处理程序：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        render: function(c) {
            c.body.on('click', function() {
                alert('ok');
            });
        }
    }
});

[编辑：Panel永远不会被渲染 - 添加renderTo配置。接下来，您将遇到一个空错误，告诉您c不是有效变量。你的意思是menuItem1而不是吗？]

不执行处理程序：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.getCmp('panelStart').on('click', function() {
    alert('ok');
});

[Ed：click不是Panel事件。此外，Panel尚未呈现，因此如果您将回调切换为元素而不是Component，则会出现空错误。]

获取错误：Ext.get（'panelStart'）为null：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.get('panelStart').on('click', function() {
    alert('ok');
});

[Ed：它没有呈现，见上文。从getCmp切换到get意味着您正在引用Component（确实存在，但没有click事件）来引用Element （它有一个click事件，但尚未呈现/有效。）

让面板消失：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        'render': {
            fn: function() {
                this.body.on('click', this.handleClick, this);
            },
            scope: content,
            single: true
        }
    },
    handleClick: function(e, t){
        alert('ok');
    }        
});

[Ed：传入回调的范围（content）在此代码中不是有效的引用（这是从另一个示例中错误地复制粘贴）。由于Panel var创建为menuItem1并且回调旨在在面板的范围内运行，因此范围var应为menuItem1。此外，此小组永远不会呈现，请参阅上一条评论。]

给出错误“Ext.fly（menuItem1.id）为null”：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.fly(menuItem1.id).addListener('click', Ext.getCmp(menuItem1.id) , this);

[编辑：未呈现面板，见上文]

...放在外面的Ext.onReady（）...... 获取错误：Ext.getCmp（'panelStart'）为空

Ext.getCmp('panelStart').on('click', function() {
    alert('okoutside');
});

[Ed：Panel可能在此代码运行时未呈现。此外，click不是Panel事件。]

...放在外面的Ext.onReady（）...... 获取错误：Ext.get（'panelStart'）为空

Ext.get('panelStart').on('click', function() {
    alert('okoutside');
});

[编辑：见上文]

...放在外面的Ext.onReady（）...... 得到错误：Ext.fly（'panelStart'）为空

Ext.fly('panelStart').on('click', function() {
    alert('okoutside');
});

[编辑：见上文]

在过去三年中，我检查了Firebug，<div id="startPanel">存在：

alt text

它适用于JQuery：

所以使用JQuery我只需要这样做就可以了：

$('body').delegate(('#panelStart'), 'click', function(){
    alert('ok with jquery');
});

[Ed：这不是一个好方法。它只是延迟了处理程序的附加，直到后来，当元素实际显示在DOM中时（也可以通过Ext btw完成，但仍然不是正确的方法）。我在下面的回答中列出了正确的方法。 OP的尝试都非常接近，但每个都缺少一两个关键部分。]

如何使用extJS附加这样的点击处理程序？

Answer 1

试试这个：

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        afterrender: function (comp) {
            var element = comp.getEl();
            element.on('click', function() {
                alert('ok')
            });
        }
    }
});

Answer 2

[对于其他读过这篇文章的人，我已经对here进行了相当彻底的解释。]

您缺少一些关键概念：

click 不是有效的Panel事件，因此在Panel上添加点击处理程序将不执行任何操作（这是您在上面发布的大部分代码中的问题）。

在此代码中：

var menuItem1 = new Ext.Panel({
   ...
}); 
content.body

您从另一个答案复制粘贴，但不正确。其他代码中的content引用了创建的Panel - 它是一个变量。在此代码中，您创建了面板menuItem1但后来尝试将其引用为content？

请在我给你的另一个答案中重新阅读我以前关于渲染如何工作的解释。您必须将Panel添加到呈现它的容器中，或直接呈现它（通过renderTo配置）。如果您不这样做，小组将不会出现。

使用jQuery的委托函数不使用Ext JS组件的正确方法。

Answer 3

如果要在面板内部的Ext.Elements上侦听事件，则在调用element或传入addListener config时使用listeners属性，而不是等待afterrender事件仅用于设置侦听器

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        click: {
           element: 'el', // could be 'body', or any other Ext.Elements 
                          // that are available from the component
           fn: function() {}
        }
    }
});

Answer 4

或者更简单的方法：

    listeners: { 'expand': {fn: adminSelected }}

如何将事件处理程序附加到extJS中的面板？

它适用于JQuery：

4 个答案: