详解extjs的MVC架构 [英] Explain MVC architecture of extjs

问题描述

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

I created a small sudoku app using Javascript. Now I am trying to convert that javascript code into extjs (4.1.1a) code. I have gone through the docs to understand the MVC Architecture, but it seemed not so detailed for me as I am a beginner.

有人可以解释基于我的数独应用程序的 Extjs 的 MVC 架构吗?

Can someone please explain the MVC Architecture of Extjs based on my Sudoku app?

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

The design of my sudoku app code is as follows:

以上设计说明如下:

• 容器(蓝色)-->父面板(灰色)-->子面板(红色)

父面板"是九个，每个父面板"有九个子面板".

The "parent panels" are nine and each "parent panel" has nine "child panels".

父面板"的 HTML 元素和子面板"使用 for 循环动态生成.

The HTML elements of "parent panels" and the "child panels" are being generated dynamically by using for loops.

我在子面板"上编写了诸如 KeyDown 事件和 click 事件之类的事件.

I have written events like KeyDown events and click events on "child panels".

我也写了一些函数，比如

I have also written some functions like

checkGroup() -->检查每个父面板"是否有重复的数字checkVertical() -->检查容器"的每个垂直线对于重复号码checkHorizo​​ntal() -->检查容器"的每个水平线对于重复号码

checkGroup()       --> checks in each "parent panel" whether there are any duplicate numbers checkVertical()     --> checks in each vertical line of "container" for duplicate numbers checkHorizontal() --> checks in each horizontal line of "container" for duplicate numbers

app.js(主js文件)

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

controller('app' 文件夹 --> 'controller' 文件夹 --> Sudoku.js)

controller ('app' folder --> 'controller' folder --> 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)

view ('app' folder --> 'view' folder --> 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");
    }
});

推荐答案

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

From all that I know of your app I can say nearly nothing. You have a really specific view with some listeners and actions where none should bother a controller.

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

A controller would create the container as view and may pass some config options to it without bothering much about the other nested panels. The controller may also listen to events of this container like a button that ends the game or save the game.

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

MVC doesn't mean that you would relay all events and logic into the controller.

即使这在您看来相当复杂，它仍然只是一个视图.

Even if this is in your opinion rather complex it is still just a view.

这篇关于详解extjs的MVC架构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！