现在来看看js类加载过程。如下图所示：

  1. 1､首先：浏览器中输入 localhost:1841 ，调用 index.html;
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>app</title>
  6. <!-- The line below must be kept intact for Sencha Cmd to build your application -->
  7. <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
  8. </head>
  9. <body></body>
  10. </html>

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

2､app.js文件的说明

  1. Ext.application({
  2. name: 'app',//应用的名称app
  3. extend: 'app.Application',       //继承自app.Application,这个文件是 app/Application.js
  4. autoCreateViewport: 'app.view.main.Main'  //自动创建的Viewport的类名,文件在 app/view/main/Main.js
  5. });

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

3､Application.js文件

  1. Ext.define('app.Application', {
  2. extend : 'Ext.app.Application',
  3. name : 'app',
  4. views : [], // ＭＶＣ用到的view
  5. controllers : ['Root'
  6. // MVC控制器的名称，会自动到 /app/controller下去加载同名的js文件
  7. // 对于Root,会去自动加载 /app/Controller/Root.js 这个文件
  8. ],
  9. stores : [],
  10. launch : function() {
  11. // 需要执行的语句可以加在此处
  12. }
  13. });

4、Main.js 文件

  1. Ext.define('app.view.main.Main', {
  2. extend: 'Ext.container.Container',
  3. xtype: 'app-main',
  4. controller: 'main',
  5. //MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名
  6. //这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了
  7. viewModel: {
  8. type: 'main'
  9. //MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名
  10. },
  11. layout: {
  12. type: 'border'          //系统的主页面的布局
  13. },
  14. items: [{
  15. xtype: 'panel',
  16. bind: {
  17. title: '{name}'
  18. },
  19. region: 'west',     //左边面板
  20. html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
  21. width: 250,
  22. split: true,
  23. tbar: [{
  24. text: 'Button',
  25. handler: 'onClickButton'
  26. }]
  27. },{
  28. region: 'center',       //中间面版
  29. xtype: 'tabpanel',
  30. items:[{
  31. title: 'Tab 1',
  32. html: '<h2>Content appropriate for the current navigation.</h2>'
  33. }]
  34. }]
  35. });

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

  1. controller: 'main',
  2. //MVVM架构的控制器的名称，会在当前路径中根据‘Main’ + Controller 来确定文件名
  3. //这个我没找到其他任何可以自动加载MainController.js的依据，只能作上面的判断了
  4. viewModel: {
  5. type: 'main'
  6. //MVVM架构的viewModel的类型，会在当前路径中根据‘Main’ + Model 来确定文件名
  7. },
上面的属性controller表示当前Main类的控制器为"main",这个类里没有引用控制器的语句，因此控制器的类名可能是有其默认的加载规则，应该是在当前路径中加载“Main”+"Controller.js"，这个文件作为控制器。viewModel属性定义了ＶＭ的类型，其加载类的规则和上面控制器是一样的。
 
由于此类是作为一个 autoCreateViewport 属性被加载，加载完成后会立即生成一个实例，并渲染，就是我们看到的网页。
 
 

extjs5(项目中文件的加载过程）的更多相关文章

  1. 2、手把手教你Extjs5(二)项目中文件的加载过程

    上一节中用sencha工具自动创建了一个项目,并且可以在浏览器中查看.现在我们来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; ...

  2. ELF文件的加载过程(load_elf_binary函数详解)--Linux进程的管理与调度（十三）

    加载和动态链接 从编译/链接和运行的角度看,应用程序和库程序的连接有两种方式. 一种是固定的.静态的连接,就是把需要用到的库函数的目标代码(二进制)代码从程序库中抽取出来,链接进应用软件的目标映像中: ...

  3. Spring Framework框架解析（1）- 从图书馆示例来看xml文件的加载过程

    引言 这个系列是我阅读Spring源码后的一个总结,会从Spring Framework框架的整体结构进行分析,不会先入为主的讲解IOC或者AOP的原理,如果读者有使用Spring的经验再好不过.鉴于 ...

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

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

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

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

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

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

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

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

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

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

  9. Java web 项目 web.xml 配置文件加载过程

    转载自:http://blog.csdn.net/luoliehe/article/details/46884757#comments WEB加载web.xml初始化过程: 在启动Web项目时,容器( ...

随机推荐

  1. Django学习手册 - admin后台 切换成中文显示/添加数据表

    Django admin后台管理 切换成中文界面: 站点显示为中文: 在setting 里面修改 LANGUAGE_CORE = 'zh-Hans' 字段名显示中文 class Test(models ...

  2. Linux C++ UDP Socket通信实例

    环境:Linux 语言:C++ 通信方式:UDP 服务器端的步骤如下: 1. socket:      建立一个socket 2. bind:          将这个socket绑定在某个端口上(A ...

  3. Oracle 服务器运行健康状况监控利器 Spotlight on Oracle 的安装与使用

    1.使用教程;https://blog.csdn.net/defonds/article/details/52936664 2.下载链接:https://pan.baidu.com/s/1cn7tE_ ...

  4. Django之Bootstrap使用

    首先将bootstrap文件粘贴到static文件夹中,引入分为两部分,一是css文件引入,二是js文件引入. 1.css引入: <!DOCTYPE html> <html lang ...

  5. SpringBoot实现标准的OAuth服务提供商

    ⒈添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&g ...

  6. WINDOWS系统中常用网络命令及命令实例详解

    一.查询DNS.IP,mac地址及DHCP服务的情况 二.查看ARP表:MAC地址与IP地址的映射表 三.查看共享资源 四.查看局域网内的主机名 五.查看用户列表  六.路由跟踪命令 七.查看共享资源 ...

  7. dynamic详解

    一.简介 在通过 dynamic 类型实现的操作中,该类型的作用是绕过编译时类型检查, 改为在运行时解析这些操作. dynamic 类型简化了对 COM API(例如 Office Automatio ...

  8. (并发编程)进程池线程池--提交任务2种方式+（异步回调)、协程--yield关键字 greenlet ,gevent模块

    一:进程池与线程池(同步,异步+回调函数)先造个池子,然后放任务为什么要用“池”:池子使用来限制并发的任务数目,限制我们的计算机在一个自己可承受的范围内去并发地执行任务池子内什么时候装进程:并发的任务 ...

  9. [Linux]流媒体服务器概述

    二.何为流媒体与流式传输? 2.1 流媒体 「流媒体」是指采用「流式传输」的方式在Internet播放的媒体格式,流媒体最大的特点就是「边下边播」,常用的流媒体格式有FLV(使用FLASH作为视频播放 ...

  10. 移动端判断ios还是android终端

    <script> //判断ios还是android终端       var u = navigator.userAgent;       var isAndroid = u.indexOf ...