У меня проблемы с пониманием того, как мне нужно определить и использовать модель MVC для моего тестового приложения EXTjs4.Рассмотрим следующую структуру.
app.js
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: ['Cards', 'Fourscrum'],
launch: function () {
Ext.create('Ext.container.Viewport', {
defaults: { flex: 1 },
layout: {
type: 'hbox',
align: 'stretch',
},
items:
[
Ext.widget('Fourscrum')
]
});
Контроллер:
Cards.js
Ext.define('AM.controller.Cards', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['card.List', 'priority.prioritycombo', 'card.Edit'],
Fourscrum.js
Ext.define('AM.controller.Fourscrum', {
extend: 'Ext.app.Controller',
stores: ['BacklogCards', 'InprogressCards', 'ReviewCards', 'DoneCards', 'Cards', 'Priorities', 'Sizes'],
models: ['Card', 'Priority', 'Size'],
views: ['scrum.Fourscrum', 'card.List'],
view.scrum.Fourscrum.js
Ext.define('AM.view.scrum.Fourscrum', { // *** Variable
extend: 'Ext.panel.Panel',
alias: 'widget.Fourscrum', // *** Variable
width: 400,
height: 300,
layout: 'column',
title: 'Scrum', // *** Variable
items:
[
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.backlogcardlist',
title: "Backlog",
store: 'BacklogCards'
}),
Ext.widget('cardlist',
{
alias: 'widget.inprogresscardlist',
title: "In Progress",
store: "InprogressCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.reviewcardlist',
title: "Review",
store: "ReviewCards"
}),
Ext.widget('cardlist',
{
alias: 'widget.donecardlist',
title: "Done",
store: "DoneCards"
})
]
});
Моя идеальная структура для этого приложения следующая:
Определяется область просмотра (внутри app.js)
который содержит представление Fourscrum.js (которое является просто панелью)
, которое содержит 4 различных представления List.js (которые являются просто сетками).
Пытаясь выполнить это, я в настоящее время получаюнесколько ошибок, когда я начинаю возиться с приведенным выше кодом:
- Элемент не определен
- пространство имен не определено
Кто-нибудь знает, почему это не работает?
PS.Я могу заставить этот пример работать, если я заменю свои виджеты «списка карт» панелями, определенными непосредственно в представлении Fourscrum.
PPS.Это также работает правильно, если я отказываюсь от панели контейнера Fourscrum все вместе: (
EDIT:
Я чувствовал, что мое объяснение было немного неясным, поэтому я загрузил изображение, чтобы помочь описать программу.Я не уверен, где мне нужно определить магазины, модели и представления с помощью этой вложенной структуры. Поэтому я повторил это на обоих контроллерах. Надеюсь, это не то, что вызывает проблему.
EDIT2:
Ext.define('AM.view.card.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.cardlist',
//title: 'List',
//store: 'Cards',
//multiSelect: true,
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'ddzone',
dropGroup: 'ddzone'
}
},
// selType: 'cellmodel',
// plugins: [
// Ext.create('Ext.grid.plugin.CellEditing', {
// clicksToEdit: 1
// })
// ],
columns: [
{
header: 'ID',
dataIndex: 'external_id',
field: 'textfield',
width: 30
},
{
header: 'Name',
dataIndex: 'name',
field: 'textfield',
width: 150
},
{
header: 'Priority',
dataIndex: 'priority_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Priorities").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60,
field: { xtype: 'PriorityCombo' }
},
{
header: 'Size',
dataIndex: 'size_id',
renderer: function (value) {
var display = '';
Ext.data.StoreManager.get("Sizes").each(function (rec) {
if (rec.get('id') === value) {
display = rec.get('short_name');
return false;
}
});
return display;
},
width: 60
},
{
xtype: 'actioncolumn',
width: 16,
items: [{
icon: 'Styles/Images/zoom.png', // Use a URL in the icon config
tooltip: 'Zoom In',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('name'));
}
}]
}
]
});