extjs - 为什么简单的点击 : function(). .. 在 ExtJS 中不起作用？

Question

当用户点击这个元素时，我希望它显示一个警报。

但是，当我单击此面板生成的 DIV 时，没有任何反应。

当用户点击以下面板时，如何让警报执行？

var content = new Ext.Panel({
    region:'center',
    margins:'5 0 5 5',
    cls:'empty',
    bodyStyle:'background:ivory; font-size: 13pt',
    html:'<p id="test123">This is where the content goes for each selection.</p>',
    click: function() {
        alert('was clicked');
    }
});

Answer 1

您尚未接受答案，因此我假设您对此仍不清楚。这里有一些指针......

首先，按照编码，您的面板将呈现为纯正方形。如果您希望它看起来像一个面板，您应该给它一个标题(这样标题栏就会呈现)。

其次，如前所述，click 不是 Panel 事件(它是 Element 事件)。所以你有几种方法可以达到你想要的行为。您可以在 Panel 渲染后手动将监听器附加到底层 DOM 元素:

Ext.get('txest123').on('click', function(){
    alert('foo');
});

您也可以按照我在另一个答案的评论中提到的那样处理任何 body 点击:

// .body is a Panel property for the body element
content.body.on('click', function(){
    alert('foo');
});

如果您真的想将点击限制为只有子 p 您可以添加一个检查:

// e is the event object, t is the target DOM node
content.body.on('click', function(e,t){
    if(t.id == 'txest123'){
        alert('clicked the p');
    }
});

如果我编写这个代码，我可能会做更多类似的事情:

var content = new Ext.Panel({
    region:'center',
    renderTo: document.body,
    margins:'5 0 5 5',
    cls:'empty',
    title: 'My Panel',
    id: 'txest123',
    bodyStyle:'background:ivory; font-size: 13pt',
    html:'This is where the content goes for each selection.',
    listeners: {
        'render': {
            fn: function() {
                this.body.on('click', this.handleClick, this);
            },
            scope: content,
            single: true
        }
    },
    handleClick: function(e, t){
        alert(this.id); // the panel
        alert(t.innerHTML); // the clicked el
    }
});

现在 id 在 Panel 上(它应该在的位置)，您可以根据需要使用 Panel 和/或 Element 方法访问子元素。最好将 id 保持在最高级别。您还会注意到回调函数在 Panel 的范围内执行 (scope:this)，因此在 handleClick 内您可以处理 this 作为面板本身并访问其任何属性或方法。

因此，在不确切知道您要实现的目标的情况下，我无法为您提供所需的确切代码。不过，这应该会给你一些想法。

编辑:我最初的意思是说...在您的代码中(如发布的那样)，您实际上并没有呈现面板。正如我在 my answer 中提到的那样对于您的相关问题，如果您将 Panel 作为项目添加到延迟渲染的容器中，则 Panel 的 DOM 在容器渲染之前将无法选择。在我上面的代码中，我添加了 renderTo 以便我没有这个问题，但如果你不这样做，你将不得不等到稍后某个时间呈现面板才能访问它.