extjs mvc模式中Viewport加载方式

来源：互联网发布：大数据对教育的作用编辑：程序博客网时间：2024/05/21 11:23

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

0 0