все, что я хочу сделать, это обрабатывать щелчок на панели extJS.

я пробовал все предложения на этот вопрос плюс все, что я мог найти в другом месте, но каждый из них не способами, описанными ниже.

каков правильный синтаксис для добавления обработчика событий click в панель extJS?

[редактировать: ради других, кто может найти этот вопрос позже, я добавлю некоторые комментарии встроены, чтобы сделать это проще расшифровать --@bmoeskau]

не выполняет обработчик:

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

[Ed: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: панель никогда не отображается -- add renderto config. Затем вы нажмете нулевую ошибку, сообщив вам, что 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');
});

[Ed:click не является событием панели. Кроме того, панель еще не отображена, поэтому, если вы переключили обратный вызов на элемент, а не на компонент, вы получите ошибку null.]

получает ошибку: Ext.get ('panelStart') равно 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: он не отображается, см. выше. Переключение с getCmp to get означает, что вы переключаетесь с ссылки на Component (который существует, но не имеет click событие) в ссылок Element (который имеет click событие, но еще не оказанных/действует).]

делает панель исчезнет:

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 в этом коде (это было неправильно вставлено из другого образца). Так как панель var создается как menuItem1 и обратный вызов предназначен для запуска в области панели, область VAR должна быть menuItem1. Кроме того, эта панель не отображается, см. предыд комментарии.]

дает ошибку " Ext.fly (menuItem1.id) равно 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: панель не отображается, см. выше]

...поставить снаружи внутр.onReady()... возвращает ошибку: Ext.getCmp ('panelStart') имеет значение null

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

[Ed: панель, вероятно, не отображается во время выполнения этого кода. Кроме того,click не является событием панели.]

...поставить снаружи внутр.onReady()... возвращает ошибку: Ext.get ('panelStart') является значение null

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

[Ed: см. выше]

...поставить снаружи внутр.onReady()... возвращает ошибку: Ext.fly ('panelStart') равно null

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

[Ed: см. выше]

за последние три, я проверил в Firebug и :

он работает с JQuery:

поэтому с JQuery я просто должен это сделать, и это работает:

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

[Ed: это не очень хороший подход. Это просто отсрочка. присоединение обработчика до тех пор, пока элемент фактически не появится в DOM (что также может быть сделано через Ext btw, но все равно не будет правильным подходом). Я изложил правильный подход, как указано в моем ответе ниже. Все попытки операции очень близки, но в каждой отсутствует одна или две ключевые части.]

как я могу прикрепить обработчик щелчка, как это с extJS?