extjs mvc模式中Viewport加载方式

1.首先介绍extjs mvc代码结构示意图

控制层:

Ext.define("urp.controller.RoleController",{

       extend: "Ext.app.Controller",

       stores: [ "Roles" ],

       models: [ "Role" ],

       views: [ "role.Edit", "role.List", "role.Insert"], // 红色role是目录的名字

       refs: [ {

              ref: "rolelist",

              selector: "rolelist"

       }],

 

 

2. 介绍MVC执行顺序

Controller (导入所需js)-> viewport (使用controller导入的js)->

 

在控制层载入所有js，MVC不会重复加载js

stores : [ "Roles" ],

models : [ "Role" ],

views : [ "role.Edit", "role.List" ,"role.Insert"]

ps：cntroller方面负责加载各个组件，但不负责加载Viewport组件

Viewport组件的加载由extjs 框架负责，代码片段如下：

这是jsp获取html中的代码片段

$.application({
                name: "urp",
                autoCreateViewport: !0,
                controllers: [
                    "IniController","UserController"
                ]
            });

当autoCreateViewport设置为true时表示框架自动创建Viewport组件，其中创建的过程如下：

在ext-all-debug.js中代码片段如下

  if (this.autoCreateViewport) {
            requires.push(this.getModuleClassName("Viewport", "view"));
        }

getModuleClassName的实现方式如下：

getModuleClassName: function(name, module) {  
        
        if (name.indexOf(".") !== -1 && (Ext.ClassManager.isCreated(name) || Ext.Loader.isAClassNameWithAKnownPrefix(name))) {
            return name;
        } else {
            
            return this.name + "." + module + "." + name; / /this.name为application中设置的name，比如当前的例子就是：urp
        }
    }