Extjs MVC模式前台代码组织结构

1、我们这个项目用MVC控制我们的index.jsp页面，创建完相关文件后结构如下：

2、app.js作为我们单个页面的资源文件引进index.jsp中，然后在app.js文件中添加如下代码：

app.js

 1 Ext.Loader.setConfig({enabled:true});//开启动态加载
 2 Ext.application({
 3     name: 'MVC',
 4 
 5     appFolder: 'mvc',
 6     
 7     controllers: ['MVCS'],
 8 
 9     launch: function() {
10         Ext.create('Ext.container.Viewport', {
11             layout: 'fit',
12             items: [
13                 {
14                     xtype: 'panel',
15                     title: 'Users',
16                     html : 'List of users will go here'
17                 }
18             ]
19         });
20     }
21 });

　！！！！记住开启动态加载，ext默认是不开启的，否则extjs无法识别MVC模式，既找不到我们定义的类和方法。

app.js中appFolder为我们MVC模式的根文件夹，name为它的别名，我们在项目中用name别名，我门定义的类以此别名开头，如MVC.controller.MVCS,那么我门如果在app.js中用controller［'MVCS'］属性，extjs就会动态的到mvc文件夹下的controller文件夹找到MVCS文件，并加载。

3、我门在controller中创建controller文件，controller文件用来控制我们页面的事件，包括数据请求，响应事件等，当前先保证controller类可以呗找到，添加如下代码：

Ext.define('MVC.controller.MVCS', {
    extend: 'Ext.app.Controller',

    init: function() {
        console.log('测试controller文件是否找到！');
    }
});

　我们打开开发工具，controller会输出一条语句，如果我们看到了表明我们的MVC创建成功了。

4、部署项目，启动浏览：效果如下：

我们的controller已经起作用了，在其中写我们的控制方法就可以实现控制我们页面，下一篇写一下controller中的一些方法。

PS：view层和modal层也是通过这种方式融入到我们的代码中。