上一节中用sencha工具自动创建了一个项目，并且可以在浏览器中查看。现在我们来看看js类加载过程。如下图所示：

1､首先：浏览器中输入 localhost:1841 ，调用 index.html;

<!DOCTYPE HTML>

<html>

<head>

    <meta charset="UTF-8">

    <title>app</title>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->

    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>

<body></body>

</html>

在这里面只引入了一个文件：bootstrap.js。这是一个神奇的文件，他根据配置文件bootstrap.json来设置extjs的类的调用路径、引入css，最后再根据配置文件中的信息，加载app.js。这个文件只要知道这些功能就行了，要了解具体的内部实现，可以去搜索一下相关文章。

2､app.js文件的说明

Ext.application({

    name: 'app',//应用的名称app

    extend: 'app.Application',       //继承自app.Application,这个文件是 app/Application.js

    autoCreateViewport: 'app.view.main.Main'  //自动创建的Viewport的类名,文件在 app/view/main/Main.js

});

上面的类中会根据类加载的设置信息，自动为类 app.Application加载文件 /app/Application.js,同样也为app.view.main.Main类找到js文件并加载。

3､Application.js文件

Ext.define('app.Application', {

    extend : 'Ext.app.Application',

    name : 'app',

    views : [], // ＭＶＣ用到的view

    controllers : ['Root'

    // MVC控制器的名称，会自动到 /app/controller下去加载同名的js文件

    // 对于Root,会去自动加载 /app/Controller/Root.js 这个文件

    ],

    stores : [],

    launch : function() {

        // 需要执行的语句可以加在此处

    }

});

4、Main.js 文件

Ext.define('app.view.main.Main', {

    extend: 'Ext.container.Container',

    xtype: 'app-main',

    controller: 'main',

        //MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名

        //这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了

    viewModel: {

        type: 'main'

        //MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名

    },

    layout: {

        type: 'border'            //系统的主页面的布局

    },

    items: [{

        xtype: 'panel',

        bind: {

            title: '{name}'

        },

        region: 'west',        //左边面板

        html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',

        width: 250,

        split: true,

        tbar: [{

            text: 'Button',

            handler: 'onClickButton'

        }]

    },{

        region: 'center',        //中间面版

        xtype: 'tabpanel',

        items:[{

            title: 'Tab 1',

            html: '<h2>Content appropriate for the current navigation.</h2>'

        }]

    }]

});

上面的类是继承自Container的一个容器类，这个类使用了extjs5的mvvm的新特性，

controller: 'main',

    //MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名

    //这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了

viewModel: {

    type: 'main'

    //MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名

},

上面的属性controller表示当前Main类的控制器为"main",这个类里没有引用控制器的语句，因此控制器的类名可能是有其默认的加载规则，应该是在当前路径中加载“Main”+"Controller.js"，这个文件作为控制器。viewModel属性定义了ＶＭ的类型，其加载类的规则和上面控制器是一样的。

由于此类是作为一个 autoCreateViewport 属性被加载，加载完成后会立即生成一个实例，并渲染，就是我们看到的网页。

extjs中类的动态加载机制很灵活，这里也不能全部讲到，有不明白的可以查找相关资料。在用sencha cmd 对js 进行编译以后，会将所有的js ,包括用户手工写的和extjs5 sdk中用到的类全部放在一个文件中，发布的时候就只有一个大的js文件。

2、手把手教你Extjs5(二)项目中文件的加载过程的更多相关文章

  1. extjs5(项目中文件的加载过程）

    现在来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> &l ...

  2. abp web.mvc项目中的菜单加载机制

    abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...

  3. QML中文件的加载（三种方法）

    在这里小小总结一下QML文件中如何加载QML文件与JavaScript文件. 1.QML文件中加载JavaScript文件 语法: import <ModuleIdentifier> &l ...

  4. Ogre中Mesh的加载过程详述

    转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...

  5. Spring 容器中bean的加载过程

    bean 的加载过程大致可以分为以下几个步骤: 1.获取配置的资源文件 2.对获取到的xml资源文件进行解析 3.获取包装资源 4.解析处理包装之后的资源 5.加载 提取bean 并进行注册(添加到b ...

  6. web项目中配置文件的加载顺序

    当一个项目启动时,首先是web.xml: 这里面的配置: 为什么要在web.xml中配置struts的过滤器? 因为一个web项目运行的时需要加载的,或者默认的部分配置都会在web.xml中配置,中间 ...

  7. Spring项目中Properties不能加载多个的问题

    A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块的Spring配置文件如下: <?xml version="1.0" enc ...

  8. Vue编写的页面部署到springboot网站项目中出现页面加载不全问题

    问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...

  9. Java笔记(十二)……类中各部分加载顺序及存放位置问题

    什么时候会加载类 使用到类中的内容时加载,三种情况: 创建对象:new StaticDemo(); 使用类中的静态成员:StaticCode.num = 9;  StaticCode.getNum() ...

随机推荐

  1. Android OpenGL ES（三）OpenGL ES API 命名习惯 .

    OpenGL ES是个跨平台的3D图形开发包规范,最常见的实现是采用C语言实现的,Android OpenGL ES 实现上是使用Java 语言对底层的C接口进行了封装,因此在android.open ...

  2. new thoughts over function pointers

    Previous works do not relate to function pointers, but reading some documents reading and learning S ...

  3. margin

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Python CGI编程和CGIHTTPServer

    Python2.7 的CGIHTTPServer 可以作为一个简单的HTTP服务器,能够调用cgi脚本 1 在任意目录下创建一个特殊的目录 cgi-bin ,用于存放自己写的脚本(.py或.cgi) ...

  5. 屏幕的尺寸（厘米）、屏幕分辨率（像素）、PPI它们之间是什么关系

    屏幕的尺寸(厘米).屏幕分辨率(像素).PPI它们之间是什么关系? 添加评论 分享 赞同2反对,不会显示你的姓名 知乎用户,数据ETL,UNITY3D 刘大侠.如果 赞同 以iphone4 为例,分辨 ...

  6. Json.net对数据的解析

    在官网下载Json.net文件后,解压完将Net20下面的DLL复制到Assets目录下. using UnityEngine; using System.Collections; using New ...

  7. ArrayList遍历的同时删除--- 删除还是用迭代器的比较好,其它的都会有问题.

    http://javag.iteye.com/blog/403097 ArrayList遍历的同时删除-- 删除还是用迭代器的比较好,其它的都会有问题.     博客分类: 随笔 Javathread ...

  8. hdu_2222_Keywords Search(AC自动机板子)

    题目连接:hdu_2222_Keywords Search 存个自己写的AC自动机 #include<cstdio> #include<cstring> #define F(i ...

  9. Android Studio 修改主题

    http://jingyan.baidu.com/article/6f2f55a18040aeb5b93e6cb4.html

  10. 卸载get-apt安装的软件

    我们都知道安装软件最简单的方法是apt-get install,但是卸载就不常用了,如何卸载呢? sudo apt-get remove android-tools-adb