Объяснить MVC-архитектуру extjs

Я создал небольшое приложение sudoku с помощью Javascript. Теперь я пытаюсь преобразовать этот код javascript в код extjs (4.1.1a). Я просмотрел docs, чтобы понять архитектуру MVC, но для меня это было не так подробно, как новичок.

Может кто-нибудь объяснить архитектуру MVC Extjs на основе моего приложения Sudoku?

Дизайн моего кода приложения sudoku выглядит следующим образом:

enter image description here

Описание приведенной выше конструкции выглядит следующим образом:

  • container (blue) --> parent panel (grey) --> child panel (red)

  • "Панели родителей" - девять, и каждая "родительская панель" имеет девять "дочерних панелей".

  • HTML-элементы "родительских панелей" и "дочерние панели" генерируются динамически, используя для циклов.

  • Я написал такие события, как KeyDown события и click события на "дочерних панелях".

  • Я также написал некоторые функции, такие как

    checkGroup()       → проверяет в каждой "родительской панели", есть ли дублирующие номера checkVertical()     → проверяет в каждой вертикальной строке "контейнер" для повторяющихся номеров checkHorizontal() → проверяет в каждой горизонтальной строке "контейнер" для повторяющихся номеров

EDIT: (незавершенный и неструктурированный код)

app.js (основной файл js)

Ext.application({
     name: 'Game',
     appFolder: 'app',  
     controllers: ['Sudoku']     
});

контроллер (папка "приложение" → папка "контроллер" → Sudoku.js)

//By using 'controller', trying to call 'view' here
Ext.define('Game.controller.Sudoku', {
    extend: 'Ext.app.Controller',

    init: function () {
        console.log("controller init");
    },
    onLaunch: function () {
        console.log("controller onLaunch");
    },
    views: ['Sudoku']
});

просмотр (папка "приложение" → "просмотр" → Sudoku.js)

Ext.define('Game.view.Sudoku', {
    extend: 'Ext.window.Window',  //what should I extend here for view?       
    initComponent: function () {
        //my complete sudoku js file here
        console.log("hello");
    }
});

Ответы

Ответ 1

Из всего, что я знаю о вашем приложении, я могу сказать почти ничего. У вас есть действительно конкретный вид с некоторыми слушателями и действиями, где никто не должен беспокоить контроллер.

Контроллер создаст представление container as и может передать ему некоторые параметры конфигурации, не беспокоясь о других вложенных панелях. Контроллер может также прослушивать события этого container как кнопка, которая заканчивает игру или сохраняет игру.

MVC не означает, что вы должны передать все события и логику в контроллер.

Даже если это, на ваш взгляд, довольно сложно, это все еще просто взгляд.

Ответ 2

Во-первых, вы должны хорошо понимать, как работает MVC, прежде чем пытаться его реализовать, особенно в Ext JS с поддержкой MVC в последней версии.

Говоря в общем смысле (поскольку вы единственный, кто действительно знает ваш код), я бы разделил код как таковой:

  • Модель: матрица 9x9 значений данных (или матрица 3x3 матриц 3x3), метод проверки, который определяет, разрешена ли головоломка или имеются ли какие-либо ошибки в пользователе ввод (например, два 6 в поле) и, возможно, поддержка отмены.

  • Вид. Ваш контейнер выше. Контроллер не должен понимать, как контейнер отображает значения. Я бы, вероятно, отправил свои собственные события, специфичные для судоку, такие как cellchanged(container, x, y, newValue, oldValue) и undo(container).

  • Контроллер: прослушивает события, специфичные для sudoku, в представлении и соответственно обновляет модель. После каждого обновления проверяет модель, чтобы определить, была ли головоломка решена или определенные ячейки неверны. Не должен выступать в качестве реле для всех событий просмотра. Такие события, как render и resize, не относятся к контроллеру судоку. Только слушайте, что вам действительно нужно.