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

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

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

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

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

• 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");
    }
});