为什么简单的单击：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');
});

您也可以按照我在另一个答案的 cmets 中提到的方法来处理任何身体点击：

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

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

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

Answer 2

Panel 组件不会公开点击事件，因此您传递到配置中的组件永远不会被触发。

尝试在 Ext.Panel 对象上添加一个 id，然后使用 Ext.get() 获取其元素。然后通过on()添加click事件：

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

Ext.get('myPanel').on('click', function() {alert('You clicked me');}); 

Answer 3

以下示例有点粗糙，但对我有用。它是一个带有盒子组件的面板，显示缩略图。单击缩略图时，会显示一个带有 slimbox2 的灯箱。不漂亮，但非常有效。硬编码的图像在这里仅用于测试。

var panel = new Ext.Panel({
        title       : 'Image',
        header      : false,
        frame       : true,
        border      : false,
        bodyStyle   : 'padding : 5px',
        width       : 125,
        items       : [{
            xtype      : 'box',
            height     : 115,
            width      : 115,
            listeners : {
                'render': function() {
                    var id = Ext.id(this);                            
                    Ext.fly(id).addListener('click', function () {
                        jQuery.slimbox('thisisnotanimage', 'CBX');
                    });                            
                }
            },
            autoEl: {
                tag : 'div',
                html : 'somehtmltagstuff' 
            }   
        }
        ]
    });

Answer 4

根据 API，click 不是 Panels 的有效事件...但是，您仍然应该能够将 click 事件添加到底层 DIV 元素。

Ext.fly(e.id).addListener('click', Ext.getCmp(e.id) , this);

Answer 5

我相信你需要这样的东西：

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>',
    listeners: {
        click: function() {
            alert('was clicked');
        }
    }
});