2、手把手教你Extjs5(二)项目中文件的加载过程
上一节中用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(二)项目中文件的加载过程的更多相关文章
- extjs5(项目中文件的加载过程）
现在来看看js类加载过程.如下图所示: 1､首先:浏览器中输入 localhost:1841 ,调用 index.html; <!DOCTYPE HTML> <html> &l ...
- abp web.mvc项目中的菜单加载机制
abp中的菜单加载机制 在abp中菜单的定义与我们传统写的框架不一样,它是在编写代码的时候配置,而我们一般写的通用权限管理系统中,是后期在后台界面中添加的.这一点有很大不同.abp关于菜单的定义及管理 ...
- QML中文件的加载（三种方法）
在这里小小总结一下QML文件中如何加载QML文件与JavaScript文件. 1.QML文件中加载JavaScript文件 语法: import <ModuleIdentifier> &l ...
- Ogre中Mesh的加载过程详述
转自:http://blog.csdn.net/yanonsoftware/article/details/1031891 如果新开始写一个3D渲染引擎,Mesh应该是一个很好的切入点.当一个看似简单 ...
- Spring 容器中bean的加载过程
bean 的加载过程大致可以分为以下几个步骤: 1.获取配置的资源文件 2.对获取到的xml资源文件进行解析 3.获取包装资源 4.解析处理包装之后的资源 5.加载 提取bean 并进行注册(添加到b ...
- web项目中配置文件的加载顺序
当一个项目启动时,首先是web.xml: 这里面的配置: 为什么要在web.xml中配置struts的过滤器? 因为一个web项目运行的时需要加载的,或者默认的部分配置都会在web.xml中配置,中间 ...
- Spring项目中Properties不能加载多个的问题
A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块的Spring配置文件如下: <?xml version="1.0" enc ...
- Vue编写的页面部署到springboot网站项目中出现页面加载不全问题
问题描述: 在用Vue脚手架 编写出一个页面之后, 部署到后台项目中, 因为做的是一个页面 按理来说 怎么都能够在服务器上运行 , 我也在自己的node环境测试 , 在同学的springboot上运行 ...
- Java笔记(十二)……类中各部分加载顺序及存放位置问题
什么时候会加载类 使用到类中的内容时加载,三种情况: 创建对象:new StaticDemo(); 使用类中的静态成员:StaticCode.num = 9; StaticCode.getNum() ...
随机推荐
- 【HDU 5833】Zhu and 772002（异或方程组高斯消元讲解）
题目大意:给出n个数字a[],将a[]分解为质因子(保证分解所得的质因子不大于2000),任选一个或多个质因子,使其乘积为完全平方数.求其方法数. 学长学姐们比赛时做的,当时我一脸懵逼的不会搞……所以 ...
- vps安装wordpress遇到的问题（lnmp）
1.要执行请求的操作,WordPress 需要访问您网页服务器的权限. 请输入您的 FTP 登录XXXX完美解决方法 因为在wordpress中新上传的插件的权限都是www用户的,而不是root或其他 ...
- 初识Ubuntu
刚刚装好bantu 16.10就遇到了好多问题,记录一下 一.卸载一些用不到的软件. 1.su认证失败 sudo passwd //输入命令,然后修改密码即可 2.卸载libreoffice sudo ...
- sql日期
当我们处理日期时,最难的任务恐怕是确保所插入的日期的格式,与数据库中日期列的格式相匹配. 只要您的数据包含的只是日期部分,运行查询就不会出问题.但是,如果涉及时间部分,情况就有点复杂了. 在讨论日期查 ...
- openwrt+ndp+ndppd+radvd+dhcpv6,ipv6穿透配置指南
要用ipv6首先你的openwrt路由内核必须已经支持ipv6,且能安装相关软件! 首先说说最简单的ndp手工ipv6穿透,很简单,看代码详解: 环境: wan口 eth1 lan口 br-lan w ...
- combo扩展:禁止手工改变输入框的值
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- AppCompatActivity工具栏的设置（返回操作）
<android.support.v7.widget.Toolbar android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionB ...
- PAT （天梯）L2-004. 这是二叉搜索树吗？
L2-004. 这是二叉搜索树吗? 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 一棵二叉搜索树可被递归地定义为具有下列性质的 ...
- Oracle Sql优化之日期的处理
1.时,分,秒,年,月,日等日期的常用取值方法 select hiredate, to_number(to_char(hiredate,'hh24')) 时, to_number(to_char(hi ...
- 十二月总结-and-2016年终总结
回顾 今天是2016的最后一天了,所以今天来做一个年终总结是最好不过的了.各种期末考试随着而来,也就意味着在工大的第一个学期马上结束了.回顾一下这一年所获得或者失去的一些东西: 2月份在家焦虑的等待着 ...