为什么不简单点击:function()...在ExtJS中工作？

Question

当用户点击此元素时,我希望它显示警告.

但是,当我单击此Panel生成的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

你还没有接受答案,所以我猜你还不清楚这个.这里有几点指示......

首先,按照编码,您的面板将呈现为普通方形.如果你希望它看起来像一个Panel,你应该给它一个标题(所以标题栏将呈现).

其次,如上所述,click不是Panel事件(它是一个Element事件).所以你有几种方法来达到你想要的行为.在呈现Panel后,您可以手动将侦听器附加到底层DOM元素:

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

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

// .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视为Panel本身并访问其任何属性或方法.

因此,如果不确切知道您要实现的目标,我无法为您提供所需的确切代码.但是,这应该会给你一些想法.

编辑:我原本想说这个...在你的代码中(如发布的那样)你实际上并没有渲染Panel.正如我在回答您的相关问题时提到的,如果您将Panel作为项添加到延迟呈现的容器中,则在容器呈现之前,Panel的DOM将无法选择.在我上面的代码中,我添加了renderTo以便我没有这个问题,但是如果你不这样做,你将不得不等到Panel稍后再渲染才能访问它.