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

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

首先，按照编码，您的面板将呈现为普通方格。如果你期望它看起来像一个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。正如我在my answer中提到的相关问题，如果您将Panel作为项添加到延迟呈现的容器中，则在容器呈现之前，Panel的DOM将无法选择。在我上面的代码中，我添加了renderTo以便我没有这个问题，但是如果你没有这样做，你将不得不等到以后某个时候渲染Panel才能访问它。

Answer 2

Panel组件不会公开click事件，因此您传递给配置的组件永远不会被触发。

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

添加on()个事件

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');
        }
    }
});

为什么不简单点击：function（）...在ExtJS中工作？

5 个答案: