解释extjs的MVC架构

Question

解释extjs的MVC架构

extjsextjs4extjs4.1extjs-mvc

10

我使用Javascript创建了一个小的数独应用程序。现在我正在尝试将该javascript代码转换为extjs（4.1.1a）代码。我已经阅读了文档以了解MVC架构，但对我来说似乎不够详细，因为我是初学者。

请有人能否根据我的数独应用程序解释一下Extjs的MVC架构?

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

enter image description here

上述设计的说明如下：

容器（蓝色）--> 父级面板（灰色）--> 子面板（红色）
"父级面板"共有九个，每个"父级面板"都有九个"子面板"。
"父级面板"和"子面板"的HTML元素通过使用for循环动态生成。
我在"子面板"上编写了KeyDown事件和click事件。
我还编写了一些函数，例如：

checkGroup() --> 检查每个“父级面板”中是否有重复的数字 checkVertical() --> 在“容器”的每个垂直线上检查重复数字 checkHorizontal() --> 在“容器”的每个水平线上检查重复数字

编辑：（未完成和不规范的代码）

app.js (主js文件)

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

控制器（'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");
    }
});

- Mr_Green

你需要一个数独控制器，但是你把它命名为“用户”... - sra

@sra 不好意思，之前是打错了，我已经改正了。虽然在我的 Chrome 控制台中看不到 "hello"，但我按照文档中的说明扩展了控制器和视图。我这里做得对吗？ - Mr_Green

@sra 不知怎么的，我进入了控制器部分（显示控制器的消息）。现在它只是没有显示“视图”消息，即“你好”。我可能哪里出错了，我不明白。 - Mr_Green

你需要告诉控制器他应该做什么。例如，在他加载时加载你的视图。为此，你可以使用 refs（还有其他方法，但我认为在你的情况下 refs 是最容易的）。请注意，在调用它们之前定义 refs。 - sra

@sra，您能告诉我在哪里提供ref（ref似乎是私有的）吗？我甚至在Sencha论坛上问了同样的问题。 - Mr_Green

请阅读这里关于refs的内容，并注意复数形式；如果您向上滚动，会有一些关于refs的示例。 - sra

2个回答

6

首先，在尝试实现MVC之前，您应该对MVC的工作原理有很好的了解，特别是在最近版本中添加了MVC支持的Ext JS。

从一般意义上讲（因为只有您真正了解您的代码），我会将代码分离如下：

模型：9x9数据值矩阵（或3x3矩阵的3x3矩阵），一个验证方法，确定谜题是否已解决或用户输入中是否存在任何错误（例如，一个盒子中有两个6），以及可能的撤消支持。
视图：您上面的容器。控制器不应知道容器如何显示值。我可能会发送自己的数独特定事件，如cellchanged(container, x, y, newValue, oldValue)和undo(container)。
控制器：在视图中侦听数独特定事件并相应地更新模型。每次更新后，验证模型以查看谜题是否已解决或某些单元格是否不正确。不应充当所有视图事件的中继。像render和resize这样的事件与数独控制器无关。只侦听您实际需要的内容。

- Eric

很好的解释。但是模型也与视图绑定在一起。在控制器中使用Relay违反了分离原则。总的来说，点赞+1。 - sra

我从来不喜欢让模型与视图交互。我想我的解释更像是Presentation Abstraction Control而不是真正的MVC。但是在某个点上，你必须停止担心架构语义，只需编写该死的代码即可。+1回到你那里。 - Eric

请查看我的帖子编辑。我添加了如何做到这一点的信息。代码甚至没有显示任何错误，我在调用函数时可能出了什么问题？ - Mr_Green

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sra · Accepted Answer

从我所了解的你的应用程序，我几乎不能说什么。你有一个非常特定的视图，一些监听器和动作，其中没有一个应该干扰控制器。

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

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

即使在你的看法中这相当复杂，它仍然只是一个视图。