extjs5(03--项目中文件的加载过程)

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

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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5
 6     <title>app</title>
 7
 8     <!-- The line below must be kept intact for Sencha Cmd to build your application -->
 9     <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
10
11 </head>
12 <body></body>
13 </html>

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

2､app.js文件的说明

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

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

3､Application.js文件

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

4、Main.js 文件

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

上面的类是继承自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 属性被加载，加载完成后会立即生成一个实例，并渲染，就是我们看到的网页。

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

转载于:https://www.cnblogs.com/isonre/p/4703832.html

extjs5(03--项目中文件的加载过程)相关推荐

vue项目中 img标签加载失败方法，onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法第二种方法本人写的第一篇文章,希望对你有帮助第一种方法 < img src="123" :οnerrοr=&q ...
vue项目中 img标签加载失败(404)方法，@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
Java虚拟机中类的加载过程
Java中类的加载过程例如下面的一段简单的代码 public class HelloWorld {public static void main(String[] args) {System.ou ...
高通平台dtb文件的加载过程
高通平台dtb文件的加载过程高通平台对dts的两种打包方式 zImage-dtb dt.img zImage-dtb方式 zImage-dtb的编译二进制文件查看 lk的加载过程代码分析 dt.i ...
EXE文件的加载过程
一个microsoft的.exe程序文件的启动过程 2009-06-16 14:54 2101人阅读评论(0) 收藏举报 microsoftmfcwindowsshelldll数据结构学习win ...
react项目中使用esri-loader加载天地图
1.在项目中安装esri-loader npm install esri-loader // or yarn add esri-loader 2.加载代码如下: 代码是基于react hook编写: ...
SpringBoot项目中静态资源加载失败，那可能是自定义配置类继承了WebMvcConfigurationSupport这个类
1.跟着视频课学SpringBoot,自己的一个html登录页面就是在浏览器中渲染不出来效果,很郁闷.我的项目结构如下: 2.想要打开login.html页面,该页面用到了静态资源中的css文件及sv ...
actionscript(as) 项目中使用 fla 加载 fla
我见到很多人都是直接就new fla里面的东西,但是我至今没有到那是怎么做到的,有网友了解,烦请留言告知. 我现在找到的方法是在类里定义一个private var baLoader:Loader; ...
spring boot中mysql驱动加载过程
1.我们一般选择的Datasoure工具类 private static final String[] DATA_SOURCE_TYPE_NAMES = new String[] { "o ...

extjs5(03--项目中文件的加载过程)

extjs5(03--项目中文件的加载过程)相关推荐

最新文章

热门文章