Все, что я хочу сделать, это обработать щелчок на панели extJS .
Я перепробовал все предложения по этому вопросу плюс все, что могнайти в другом месте, но каждый из них завершится с ошибкой описанным ниже способом.
Какой правильный синтаксис для добавления обработчика события click на панель extJS?
[ Редактировать : Ради других, которые могут найти этот вопрос позже, я добавлю несколько комментариев, чтобы облегчить их расшифровку - @ bmoeskau]
не делаетt выполнить обработчик:
var menuItem1 = new Ext.Panel({
id: 'panelStart',
title: 'Start',
html: 'This is the start page.',
cls:'menuItem',
listeners: {
click: function() {
alert('ok');
}
}
});
[Ed: click не является событием 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');
});
}
}
});
[Ed: TheПанель никогда не отображается - добавьте 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');
});
[Ред .: click не является событием Panel.Кроме того, 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 означает, что вы переходите от ссылки 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');
}
});
[Ред .: Область, передаваемая в обратный вызов (content), не является допустимым указателемв этом коде (это было неправильно скопировано из другого примера).Поскольку переменная Panel создается как menuItem1 и обратный вызов предназначен для запуска в области видимости панели, область видимости должна быть 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);
[Ред .: Панель не являетсяотображается, см. выше]
... помещается вне Ext.onReady () ... получает ошибку: Ext.getCmp ('panelStart') имеет значение null
Ext.getCmp('panelStart').on('click', function() {
alert('okoutside');
});
[Ред .: Panelскорее всего, не отображается во время выполнения этого кода.Кроме того, click не является событием Panel.]
... помещается вне Ext.onReady () ... получает ошибку: Ext.get ('panelStart') имеет значение null
Ext.get('panelStart').on('click', function() {
alert('okoutside');
});
[Ред .: см. Выше]
... помещается за пределы Ext.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, но все равно не будет подходящим подходом).Я изложил правильный подход, как указано в моем ответе ниже.Все попытки ОП очень близки, но в каждой из них отсутствуют один или два ключевых элемента.]
Как я могу прикрепить обработчик кликов, подобный этому, к extJS?