Wie befestige ich einen event-handler auf ein panel in extJS?

Alles was ich tun möchte ist Griff, ein Klick auf ein extJS panel.

Ich habe versucht, alle Vorschläge auf diese Frage plus alle die ich finden konnte, anderswo aber jeder von Ihnen scheitern in der nachstehend beschriebenen Weise.

Was ist die korrekte syntax zum hinzufügen eine click-Ereignis-handler zu einem extJS panel?

[Bearbeiten: Für das wohl der anderen, die finden, diese Frage später, ich ' ll fügen Sie einige inline-Kommentare, um diese einfacher zu entschlüsseln --@bmoeskau]

nicht ausführen handler:

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

[Ed: click ist nicht eine Panel-Veranstaltung]

nicht ausführen handler:

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: Das Panel wird nie gerendert -- add renderTo config. Als Nächstes treffen Sie eine null-Fehler-sagen Sie, dass c ist keine gültige variable. Meinst du menuItem1 statt?]

nicht ausführen handler:

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

[Ed: click ist nicht eine Panel-Veranstaltung. Auch das Panel ist noch nicht erbracht, so dass, wenn Sie eingeschaltet, der Rückruf auf das element, anstatt die Komponente, die Sie bekommen würde, eine null-Fehler.]

wird Fehler: Ext.get('panelStart') ist null:

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

[Ed: Es ist nicht dargestellt, siehe oben. Wechsel von getCmp zu get bedeutet, dass Sie den Wechsel von verweisen auf die Component (die nicht vorhanden ist, aber nicht ein click Ereignis) zu verweisen auf die Element (die eine click Ereignis, aber noch nicht gerendert/gilt).]

ist das panel verschwinden:

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: Umfang weitergegeben, in der Rückruf (content) ist keine gültige ref in diesem code (das war copy-eingefügt fälschlicherweise aus einer anderen Stichprobe). Da die Panel-var erstellt, wie menuItem1 und der callback ausgeführt werden soll, in das panel-scope, scope var sollte menuItem1. Auch dieses Fenster ist nie gerendert, siehe Vorherige Kommentare.]

gibt die Fehlermeldung "Ext.Fliegen(menuItem1.id) is null":

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

[Ed: Panel ist nicht gerendert, siehe oben]

...vor die Tür gesetzt Ext.onReady()...
wird Fehler: Ext.getCmp('panelStart') ist null

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

[Ed: Panel ist wahrscheinlich nicht gerendert an der Zeit, dieser code ausgeführt wird. Auch click ist nicht eine Panel-Veranstaltung.]

...vor die Tür gesetzt Ext.onReady()...
wird Fehler: Ext.get('panelStart') ist null

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

[Ed: Siehe oben]

...vor die Tür gesetzt Ext.onReady()...
wird Fehler: Ext.Fliegen('panelStart') ist null

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

[Ed: Siehe oben]

Für die letzten drei, überprüfte ich in Firebug und <div id="startPanel"> vorhanden ist:

Es funktioniert mit JQuery:

Also mit JQuery habe ich einfach dazu und es funktioniert:

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

[Ed: ist Dies nicht ein guter Ansatz. Es ist einfach die Verzögerung anbringen der handler erst später, wenn das element tatsächlich zeigt sich in den DOM (und das kann auch getan werden, über Ext btw, würde aber trotzdem nicht der richtige Ansatz). Ich buchstabierte den richtigen Ansatz, wie verknüpft in meiner Antwort weiter unten. Die OP ' s versuche sind alle sehr eng, aber jeder der fehlen ein oder zwei key-pieces.]

Wie kann ich die befestigen Sie einen click-Ereignishandler wie diese mit extJS?