我只想做 处理extJS面板上的单击 .

我试过所有的建议 this question 加上我在别处能找到的 他们每个人都失败了 以下面描述的方式。

向extJS面板添加click事件处理程序的正确语法是什么?

[ 编辑 :为了以后可能找到这个问题的其他人,我将在内联中添加一些注释,以便更容易破译--@bmoeskau]

不执行处理程序:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        click: function() {
            alert('ok');
        }
    }
}); 

[编辑: click 不是面板事件]

不执行处理程序:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        render: function(c) {
            c.body.on('click', function() {
                alert('ok');
            });
        }
    }
}); 

[Ed:面板从未被呈现——添加renderTo配置。接下来,你会遇到一个空错误告诉你 c 不是有效的变量。你是说 menuItem1 相反呢?]

不执行处理程序:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.getCmp('panelStart').on('click', function() {
    alert('ok');
});

[编辑: 点击 不是面板事件。此外,该面板尚未呈现,因此如果将回调切换到元素而不是组件上,则会出现空错误。]

获取错误:Ext.get('panelStart')为空:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.get('panelStart').on('click', function() {
    alert('ok');
});

[艾德:没有渲染,见上图。切换 getCmp 到 get 意味着您正在从引用 Component (确实存在,但没有 点击 事件)引用 Element (它确实有 点击 事件,但尚未呈现/有效)

使面板消失:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem',
    listeners: {
        'render': {
            fn: function() {
                this.body.on('click', this.handleClick, this);
            },
            scope: content,
            single: true
        }
    },
    handleClick: function(e, t){
        alert('ok');
    }        
}); 

[Ed:传入回调的作用域( content )不是此代码中的有效ref(这是从另一个示例中错误粘贴的副本)。因为Panel变量创建为 菜单项1 而且回调是在面板的作用域中运行的,scope var应该是 菜单项1 . 此外,此面板从未呈现,请参阅上一条注释。]

给出错误“Ext.fly(menuItem1.id)为空”:

var menuItem1 = new Ext.Panel({
    id: 'panelStart',
    title: 'Start',
    html: 'This is the start page.',
    cls:'menuItem'
}); 
Ext.fly(menuItem1.id).addListener('click', Ext.getCmp(menuItem1.id) , this);

[编辑:面板未渲染,请参见上文]

…将外部设置为onReady()。。。 获取错误:Ext.getCmp('panelStart')为空

Ext.getCmp('panelStart').on('click', function() {
    alert('okoutside');
});

[Ed:运行此代码时,面板可能无法呈现。也, 点击 不是小组活动。]

…将外部设置为onReady()。。。 获取错误:Ext.get('panelStart')为空

Ext.get('panelStart').on('click', function() {
    alert('okoutside');
});

[编辑:见上图]

…将外部设置为onReady()。。。 获取错误:Ext.fly('panelStart')为空

Ext.fly('panelStart').on('click', function() {
    alert('okoutside');
});

[编辑:见上图]

最后三次,我登记了Firebug <div id="startPanel"> 存在:

它与JQuery一起工作:

因此,对于JQuery,我只需要这么做,它就可以工作:

$('body').delegate(('#panelStart'), 'click', function(){
    alert('ok with jquery');
});

[艾德:这不是个好办法。只是将处理程序的附加延迟到稍后,当元素实际出现在DOM中时(也可以通过Ext btw完成,但仍然不是正确的方法)。我阐述了正确的方法,如下我的答案所示。OP的尝试都非常接近,但每个尝试都缺少一两个关键部分。]

如何在extJS中附加这样的单击处理程序?