为什么简单的点击: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 位于面板上(它应该在的位置)，您可以根据需要使用面板和/或元素方法来访问子元素.最好将 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屋！
