跟我extjs5(03--在项目过程中加载文件)
上一节中用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>', 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文件。