Я задал этот вопрос на SenchaCon в этом году, разработчики Sencha заявили, что их намерение состоит в том, чтобы прослушиватели DOM были подключены к вашему представлению, а представление должно абстрагировать их в более значимые события компонентов и переопределить их.
Например, предположим, что вы создаете представление под названием UserGallery, которое показывает сетку лиц людей.В вашем классе представления UserGallery вы будете прослушивать событие нажатия DOM на теге <img>, чтобы получить событие и цель, а затем представление может запустить событие компонента с именем «userselected» и передать экземпляр модели для пользователя, которого щелкнули, вместоцель DOM.
Конечной целью является то, что только ваши представления должны быть связаны с такими вещами, как события интерфейса и элементы DOM, в то время как контроллер уровня приложения имеет дело только с осмысленными намерениями пользователя.Код вашего приложения и контроллера вообще не должен быть связан с вашей структурой разметки или реализацией интерфейса.
Пример представления
Ext.define('MyApp.view.UserGallery', {
extend: 'Ext.Component'
,xtype: 'usergallery'
,tpl: '<tpl for="users"><img src="{avatar_src}" data-ID="{id}"></tpl>'
,initComponent: function() {
this.addEvents('userselected');
this.callParent(arguments);
}
,afterRender: function() {
this.mon(this.el, 'click', this.onUserClick, this, {delegate: 'img'});
this.callParent(arguments);
}
,onUserClick: function(ev, t) {
ev.stopEvent();
var userId = Ext.fly(t).getAttribute('data-ID');
this.fireEvent('userselected', this, userId, ev);
}
});
Примечания к представлениям
- Расширить«Ext.Component», когда все, что вам нужно, это управляемый
<div>, Ext.Panel намного тяжелее для поддержки таких вещей, как заголовки, панели инструментов, свертывание и т. Д. - Используйте «управляемых» слушателей при подключении слушателейЭлементы DOM из компонента (см. Component.mon).Прослушиватели, управляемые компонентами, будут автоматически освобождены, когда этот компонент будет уничтожен
- При прослушивании одного и того же события из нескольких элементов DOM используйте опцию события «делегат» и присоедините слушателя к их общему родителю, а не к отдельному.элементы.Это работает лучше и позволяет вам создавать / уничтожать дочерние элементы произвольно, не беспокоясь о постоянном присоединении / удалении слушателей событий к каждому дочернему элементу.Старайтесь не использовать что-то вроде
.select('img').on('click', handler) - При запуске события из представления, соглашение Сенчи гласит, что первым параметром события будет
scope - ссылка на представление, которое вызвало событие.Это удобно, когда событие обрабатывается из контроллера, где вам нужен фактический объем обработчика событий, чтобы быть контроллером.
Sample Controller
Ext.define('app.controller.myController', {
extend: 'Ext.app.Controller'
,init: function() {
this.control({
'usergallery': {
userselected: function(galleryView, userId, ev) {
this.openUserProfile(userID);
}
}
});
}
,openUserProfile: function(userId) {
alert('load another view here');
}
});