使用 ExtJS 面板添加点击事件答案

【问题标题】：Add Click Event with ExtJS Panel使用 ExtJS 面板添加点击事件
【发布时间】：2011-02-24 17:13:39
【问题描述】：

我正在尝试在 ext js 中创建面板并获得成功，但我也想用这个添加点击事件

       {
            xtype: 'panel',
            flex: 1,
            x: 10,
            y: parseInt(panelCreation[i - 1].y) + 
               parseInt(panelCreation[i -1].height) + 10,
            width: twidth,
            height: theight,
            layout: 'absolute'                
        }

我不想单独添加点击事件我想在布局之后添加此代码：绝对添加逗号和事件请帮助我。

【问题讨论】：

标签： extjs

【解决方案1】：

您可以为点击事件添加以下内容：

listeners: {
   'render': function(panel) {
       panel.body.on('click', function() {
           alert('onclick');
       });
    }
}

编辑：要获取点击事件的 X 和 Y 坐标，您可以按如下方式更改点击事件处理程序...

panel.body.on('click', function(e) {
   alert('X: ' + e.getPageX());
   alert('Y: ' + e.getPageY());
});

【讨论】：

我已经找到了，但无论如何感谢 Kirk Woll 的回复，一切正常。
@Jaitsu，不想发布另一个问题，但是如果发生此事件，我如何获得点击坐标？
@JamesHalsall 在 MVC ExtJS4 中，这似乎使得面板主体的点击事件也可以从其他没有此控制器的视图中触发。你有同样的问题吗？
我没用过 ExtJS 4，所以很遗憾帮不了你
如果您希望事件在标题和面板上触发，例如 lbar 点击，请使用 panel.el.on('click', function(){...}) 而不是 panel.body.on('click', function(){...})

【解决方案2】：

new Ext.Panel({
    title: 'The Clickable Panel',
    listeners: {
        render: function(p) {
            // Append the Panel to the click handler's argument list.
            p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
        },
        single: true  // Remove the listener after first invocation
    }
});

【讨论】：

朋友能不能把可点击折线图的代码贴出来。
我发现这个答案比接受的答案更好，因为当在标题处执行点击时它也会触发事件。

【解决方案3】：

在我看来，有一种更直接的方法可以做到这一点……（直接取自docs）。有关添加侦听器的更多信息，请参阅here。 (Ext Js 4)

new Ext.panel.Panel({
    width: 400,
    height: 200,
    dockedItems: [{
        xtype: 'toolbar'
    }],
    listeners: {
        click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
        },
        dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
        }
    }
});

【讨论】：