标签：
上一节中用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文件。
标签：
原文地址：http://www.cnblogs.com/isonre/p/4703832.html
