为什么不简单点击：function（）...在ExtJS中工作？ [英] Why doesn't a simple click: function()... work in ExtJS?

问题描述

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

When the user clicks on this element, I want it to show an alert.

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

However, when I click on the DIV that this Panel generates, nothing happens.

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

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');
    }
});

推荐答案

你还没有接受答案，我会假设你还不清楚这一点。这里有几个指针...

You haven't accepted an answer, so I'll assume you're still unclear on this. Here are a few pointers...

首先，按照编码，您的面板将呈现为平方。如果你期望它像一个面板，你应该给它一个标题（所以标题栏将呈现）。

First, as coded your Panel will render as a plain square. If you're expecting it to look like a Panel, you should give it a title (so the title bar will render).

其次，如上所述，点击不是一个Panel事件（它是一个Element事件）。所以你有几种方法来达到你想要的行为。在面板渲染后，您可以手动将侦听器附加到底层的DOM元素：

Second, as mentioned, click is not a Panel event (it's an Element event). So you have several ways of getting to the behavior you want. You can manually attach a listener to the underlying DOM element after the Panel is rendered:

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

您还可以按照我在另一个答案的评论中提到的一般处理任何身体点击： / p>

You could also do as I mentioned in the comments of another answer to generically handle any body click:

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

如果你真的想限制点击只有孩子 p 你可以添加一个支票：

If you really want to restrict the click to only the child p you could add a check:

// 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');
    }
});

如果我编码这个，我可能会这样做：

If I was coding this, I'd probably do something more like this:

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和/或根据需要访问子元素的元素方法。最好把id保持在最高级别。您还会注意到，回调函数在面板的范围内执行（ scope：this ），以便在 handleClick 您可以将这个视为面板本身，并访问其任何属性或方法。

Now the id is on the Panel (where it should be) and you can use Panel and/or Element methods to access child elements as needed. It's best to keep id's at the highest level possible. You'll notice too that the callback function is executed in the scope of the Panel (scope:this) so that inside handleClick you can treat this as the Panel itself and access any of its properties or methods.

所以，没有了解您正在尝试实现的目标，我无法为您提供所需的确切代码。但是，这应该可以给你一些想法。

So, without knowing exactly what you're trying to achieve, I can't provide you with the exact code you need. However, this should hopefully give you some ideas.

编辑：我的意思是说，你实际上并没有提交面板。正如我在中提到的我的答案相关的问题，如果您将面板作为一个项目添加到一个容易呈现的容器中，面板的DOM将不可用于选择，直到容器呈现为止。在我上面的代码中，我添加了 renderTo ，以便我没有这个问题，但如果你不这样做，你必须等到面板呈现稍后再访问它。

EDIT: I meant to say this originally... in your code (as posted) you are not actually rendering the Panel. As I mentioned in my answer to your related question, if you are adding the Panel as an item to a container that is lazy-rendered, the Panel's DOM won't be available for selection until after the container has rendered it. In my code above I added renderTo so that I don't have this issue, but if you're not doing that you'll have to wait until the Panel is rendered at some time later to access it.

这篇关于为什么不简单点击：function（）...在ExtJS中工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！