我使用Javascript创建了一个小的数独应用程序。现在我正在尝试将该javascript代码转换为extjs(4.1.1a)代码。我已经阅读了文档以了解MVC架构,但对我来说似乎不够详细,因为我是初学者。
请有人能否根据我的数独应用程序解释一下Extjs的MVC架构?
我的数独应用程序的设计如下:
上述设计的说明如下:
容器(蓝色)--> 父级面板(灰色)--> 子面板(红色)
"父级面板"共有九个,每个"父级面板"都有九个"子面板"。
"父级面板"和"子面板"的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");
}
});