Как можно разделить main view и listeners?
Помогите с архитектурой, допустим у меня есть main view, фрагмент:
items: [
{
xtype: 'dataview',
autoScroll: true,
id: 'dataview',
margin: '10 0 10 10',
disableSelection: false,
itemSelector: 'div',
itemTpl: [
'<tpl for=".">',
'<table>',
' <tr>',
' <td width=\'200px\'><input type="checkbox" enabled="enabled" value="open" name="comment_status" <tpl if="active">checked="checked"</tpl> />{nm}</td>',
' <td class="configure"></td>',
' </tr> ',
' </table>',
' ',
'</tpl>'
],
store: 'CarStore',
listeners: {
itemclick: {
fn: 'onDataviewSelectConfigure',
single: false
},
select: 'onDataviewSelect'
}
Здесь у меня прописан listeners, я сейчас здесь же в конце view описываю эти функции:
onDataviewSelect: function(dataview, record, eOpts) {
console.log("OK");
},
У меня вопрос каким образом их можно разделить? Т.е. я могу как-то их описать в контроллере? Или хотя-бы во view только в новом файле. |
вы можете подписаться на эти события в контроллере ..и повесить на них методы любого объекта.
view.on({
itemclick : this.onDataviewSelectConfigure,
select : this.onDataviewSelect
scope : this
});
|
В контроллере можно. И даже нужно. Просто указываете что листенеры работают в контроллере и пишете все функции там:
listeners: {
itemclick: {
fn: 'onDataviewSelectConfigure',
single: false
},
select: 'onDataviewSelect',
scope: 'controller' // <------------------
}
А зачем вы пишете "single: false"? Это ведь как бы по умолчанию следует. Другое дело если "true"... |
Цитата:
listeners: {
itemclick: {
fn: 'onDataviewSelectConfigure',
scope: 'controller'
},
select: {
fn: 'onDataviewSelect',
scope: 'controller'
}
}
Далее во viewController:
Ext.define('MyApp.view.MainViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onDataviewSelect: function(dataview, record, eOpts) {
console.log("OK");
},
});
Далее в консоле такое: Uncaught TypeError: Cannot read property 'apply' of undefined Что еще нужно поправить? |
Цитата:
|
Написал так в контроллере
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
views: ['Main'],
init: function() {
this.control({
'dataview': {
select : this.onDataviewSelect
}
});
},
onDataviewSelect: function(dataview, record, eOpts) {
console.log("OK");
}
});
Но помимо работы события при выборе строки в dataview, еще событие выполняется при инициализации приложения, как это исключить? Спасибо! |
Я извиняюсь за назойливость, но все таки что нужно поправить в моем случае, чтобы заработало? Спасибо!
|
treasury, вы не там описали скоп. Главный контроллер не трогайте, хендлеры работают во вью контроллере компонента. Вот как надо:
listeners: {
itemclick: 'onDataviewSelectConfigure',
select: 'onDataviewSelect',
scope: 'controller'
}
Скоп описывается для всех листенеров оптом. НО! это касается только главного элемента, к которому подключен контроллер. В дочерних его компонентах скоп не нужен, поиск хендлеров идет в контроллере по умолчанию. Например:
Ext.define("PM.view.settings.process.Show", {
extend: "Ext.panel.Panel",
requires: [ "Ext.grid.column.Check" ],
alias: "widget.settings-process-show",
controller: "settings-process-show",
viewModel: { type: "settings-process-showedit" },
bind: { title: "{model.Name}" },
items: [
{ xtype: "gridpanel",
bind: { store: "{subjectFields}" },
columns: [
{ xtype : "checkcolumn", text : "#Active", dataIndex : "Active", disabled: true },
{ text: "#Name", dataIndex: "Name", flex: 1 }
]
},
{ xtype: "docia-separator" },
{ xtype: "container",
layout: "hbox",
align: "left",
defaults: {
width: 75,
margin: "0 10 0 0"
},
items: [
{ xtype: "button", text: "<< Back", handler: "goBack" },
{ xtype: "button", text: "Edit", handler: "doEdit" }
]
}
]
});
Обратите внимание на кнопки в конце класса. Их хендлеры автоматически ищутся в контроллере, скоп не указываем. Это относится почти к любому дочернему компоненту. |
Написал во view как вы сказали:
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Viewport',
alias: 'widget.main',
xtype: 'main',
.......................................
items: [
{
xtype: 'dataview',
autoScroll: true,
id: 'dataview',
itemId: 'dataview',
margin: '10 0 10 10',
disableSelection: false,
itemSelector: 'div',
itemTpl: [],
store: 'CarStore',
listeners: {
itemclick: 'onDataviewSelectConfigure',
select: 'onDataviewSelect',
scope: 'controller'
}
Далее viewController:
Ext.define('MyApp.view.MainViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onDataviewSelect: function(dataview, record, eOpts) {
console.log("OK");
}
});
Но ничего не поменялось Uncaught TypeError: Cannot read property 'apply' of undefined |
Цитата:
controller: "main" // это где? |
| Часовой пояс GMT +3, время: 09:13. |