为什么简单的单击: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).
其次，如前所述，click 不是 Panel 事件(它是 Element 事件).所以你有几种方法可以达到你想要的行为.您可以在 Panel 渲染后手动将侦听器附加到底层 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');
});
您也可以按照我在另一个答案的评论中提到的那样处理任何身体点击:
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 和/或 Element 方法访问子元素.最好将 id 保持在最高级别.您还会注意到回调函数在 Panel 的范围内执行 (scope:this)，因此在 handleClick 内您可以处理 this 作为面板本身并访问其任何属性或方法.
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屋！
