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

问题描述

我使用Javascript创建了一个小数独的应用程序。现在我试图将该JavaScript代码转换为extjs（ 4.1.1a ）代码。我已经通过文档了解MVC架构，但是对我来说似乎并不那么详细，因为我是初学者。

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

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

上述设计的描述如下：

• 容器（蓝色） - >父面板（灰色） - >儿童面板（红色）




• 父面板是九个，每个父面板有九个子面板。




• / em>和子面板正在通过使用for循环动态生成。




• code> KeyDown 事件和点击子面板上的事件。




• 我还写了一些功能，如

  
  
  

  checkGroup（）     ;    - >在每个父面板中检查是否有重复的数字
  checkVertical（）      - >在容器的每个垂直线上检查重复数字
  checkHorizo​​ntal（） - >在容器的每个水平线上检查重复数字

---

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

app.js （主要js文件）

  Ext.application（{
 name：'Game'，
 appFolder：'app'，
 controllers：['Sudoku'] 
}）; 
  

控制器（'app' - > Sudoku.js）

  //使用'controller'，尝试在这里调用'view'
 Ext .define（'Game.controller.Sudoku'，{
 extends：'Ext.app.Controller'，
 
 init：function（）{
 console.log（controller init）; 
}，
 onLaunch：function（）{
 console.log（controller onLaunch）; 
}，
视图：['Sudoku' ] 
}）; 
  

视图（'app'文件夹 - >'查看' - > Sudoku.js）

  Ext.define（'Game.view.Sudoku'，{
 extends：' Ext.window.Window'，//这里应该怎么扩展视图？
 initComponent：function（）{
 //我的完整的数独js文件
 console.log（hello ）; 
} 
}）; 
  

解决方案

从我所知道的应用程序我可以说几乎没有。你有一个非常具体的视图与一些听众和行动，没有人应该打扰一个控制器。

控制器将创建容器作为视图，并可能会传递一些配置选项，而不会困扰其他嵌套面板。控制器也可以像结束游戏或保存游戏的按钮一样收听容器的事件。

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

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

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.

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 description of the above design is as follows:

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

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

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

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

• I have also written some functions like

  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

---

EDIT: (unfinished and unstructured code)

app.js (main js file)

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

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' 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.

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 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.

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