讲解extjs的MVC架构

我使用 Javascript 创建了一个小型数独应用程序。现在我正在尝试将该 javascript 代码转换为 extjs (4.1.1a） 代码。我已经经历了docs http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture去了解MVC架构，但对我来说似乎不是那么详细，因为我是初学者。

有人可以根据我的数独应用程序解释 Extjs 的 MVC 架构吗？

我的数独应用程序代码的设计如下：

上述设计描述如下：

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

• The "家长小组“有九个，每个”父面板“有九个”子面板".

• HTML 元素“家长小组”和“子面板" 是通过使用 for 循环动态生成的。

• 我写过类似的事件KeyDown事件和click活动于“子面板".

• 我还写了一些函数，例如

  检查组()--> 检查每个“父面板”是否有重复的数字检查垂直()--> 检查“容器”的每个垂直行是否有重复的数字检查水平()--> 检查“容器”的每个水平行是否有重复的数字

EDIT: (未完成和非结构化的代码)

app.js (主js文件)

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

控制器（'app'文件夹-->'控制器'文件夹-->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']
});

view（'app' 文件夹 --> 'view' 文件夹 --> 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");
    }
});

根据我对你的应用程序的了解，我几乎无话可说。您有一个非常具体的视图，其中包含一些侦听器和操作，而这些侦听器和操作不应打扰控制器。

控制器将创建container作为视图，并且可以将一些配置选项传递给它，而不必过多担心其他嵌套面板。控制器还可以监听此事件container就像结束游戏或保存游戏的按钮。

MVC 并不意味着您将所有事件和逻辑中继到控制器中。

即使您认为这相当复杂，它仍然只是一种观点。