extjs - 解释extjs的MVC架构

Question

我使用Javascript创建了一个小数独应用。现在，我正在尝试将该JavaScript代码转换为extjs(4.1.1a)代码。我已经通过docs来了解MVC架构，但是对于我来说，它似乎并不那么详细，因为我是一个初学者。
有人可以根据我的Sudoku应用说明Extjs的MVC架构吗？
我的数独应用程序代码的设计如下:

以上设计的说明如下:

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

“父面板”为9个，每个“父面板”具有9个“子面板”。

通过使用for循环动态生成“父面板”和“子面板”的HTML元素。

我在“子面板”上编写了诸如KeyDown事件和click事件之类的事件。

我也写了一些函数，例如
checkGroup()->检查每个“父面板”中是否有重复的数字
checkVertical()->在“容器”的每个垂直行中检查重复的数字
checkHorizo​​ntal()->在“容器”的每个水平行中检查重复的数字

编辑:(未完成和非结构化的代码)
app.js (主要js文件)

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

Controller (“应用程序”文件夹->“ Controller ”文件夹-> 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");
    }
});

Answer 1

从我对您应用程序的了解中，我几乎一言不发。您有一个非常特定的 View ，其中包含一些监听器和操作，这些监听器和操作都不应该干扰 Controller 。

Controller 可以将container创建为 View ，并且可以将一些配置选项传递给它，而无需为其他嵌套面板烦恼。 Controller 也可以收听此container的事件，例如结束游戏或保存游戏的按钮。

MVC并不意味着您会将所有事件和逻辑中继到 Controller 中。

即使您认为这很复杂，它仍然只是一个 View 。