为什么一个简单的click:function()..不能在extjs中工作?

你还没有接受答案,所以我假设你对此还不清楚。以下是一些提示…

首先,按照编码,面板将呈现为一个普通的正方形。如果你希望它看起来像一个面板,你应该给它一个标题(这样标题栏就会呈现出来)。

第二,如前所述, click 不是面板事件(它是元素事件)。所以你有几种方法来达到你想要的行为。在面板呈现后,可以手动将侦听器附加到基础的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在面板上(应该在那里),您可以根据需要使用面板和/或元素方法来访问子元素。最好保持身份证的最高级别。您也会注意到回调函数是在面板的范围内执行的。( scope:this )所以里面 handleClick 你可以治疗 this 作为面板本身并访问其任何属性或方法。

所以,如果不知道你想要实现什么,我就无法向你提供你需要的确切代码。不过,希望这能给你一些建议。

编辑 :我本来打算这么说……在您的代码中(发布时),您实际上并没有呈现面板。正如我在中提到的 my answer 对于您的相关问题,如果您将面板作为一个项添加到一个延迟呈现的容器中,那么在容器呈现面板之前,面板的DOM将不可供选择。在我上面的代码中,我添加了 renderTo 所以我没有这个问题,但是如果你不这样做,你将不得不等到面板在以后的某个时候呈现出来才能访问它。

这个 Panel 组件不公开click事件,因此传递到配置中的事件永远不会被激发。

尝试在外部面板对象上放置一个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');}); 

下面的示例有点粗糙,但对我有用。它是一个带有框组件的面板,显示缩略图。当点击缩略图时,它会显示一个带有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' 
            }   
        }
        ]
    });

根据API,单击不是面板的有效事件…但是,您仍然可以将click事件添加到基础DIV元素中。

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

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

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