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

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

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

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

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

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

[Эд: щелчок не является событием Panel]

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

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

[Эд: Панель никогда не рендерится - добавьте конфигурацию 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');
});

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

получает ошибку: 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 на get означает, что вы переключаетесь с ссылки на компонент (который существует, но не имеет события щелчка ) для ссылки на элемент (который имеет событие 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 ), не является действительной ссылкой в ​​этом коде (это было неправильно скопировано из другого примера). Поскольку переменная панели создается как menuItem1 , а обратный вызов предназначен для запуска в области действия панели, переменная области видимости должна быть menuItem1 . Кроме того, эта панель никогда не отображается, см. Предыдущие комментарии.]

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

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

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

[Эд: Скорее всего, панель не отображается во время выполнения этого кода. Кроме того, щелчок не является событием Panel.]

... вынесен за пределы Ext.onReady () ... получает ошибку: Ext.get ('panelStart') имеет значение null

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

[Ed: См. Выше]

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

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

[Ed: См. Выше]

Последние три я проверил в Firebug и

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