讲解extjs的MVC架构

Question

我使用 Javascript 创建了一个小型数独应用程序。现在我正在尝试将该 javascript 代码转换为 extjs (4.1.1a) 代码。我已经通过docs 了解了MVC 架构，但对于我是初学者来说，它似乎并不那么详细。

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

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

以上设计说明如下：

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

• “父面板”有九个，每个“父面板”有九个“子面板”。

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

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

• 我也写了一些函数，比如

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

---

编辑：（未完成和非结构化代码）

app.js（主 js 文件）

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

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

查看（'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");
    }
});

Answer 1

首先，在尝试实现 MVC 之前，您应该充分了解 MVC 的工作原理，尤其是在最新版本中添加了 MVC 支持的 Ext JS 中。

从一般意义上讲（因为您是唯一真正了解您的代码的人），我将代码分开：

• 模型：数据值的 9x9 矩阵（或 3x3 矩阵的 3x3 矩阵），一种确定谜题是否已解决或用户是否有任何错误的验证方法输入（例如，一个框中的两个 6），并可能撤消支持。

• 查看：上面的容器。控制器应该不知道容器如何显示值。我可能会发送我自己的数独专用事件，例如 cellchanged(container, x, y, newValue, oldValue) 和 undo(container)。

• 控制器：监听视图中的数独特定事件并相应地更新模型。每次更新后，验证模型以查看谜题是否已解决或某些单元格是否不正确。不应充当所有视图事件的中继。 render 和 resize 之类的事件与数独控制器无关。只听你真正需要的。

Answer 2

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

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

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

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