跟我extjs5(03--在项目过程中加载文件)
上一节中用sencha工具自己主动创建了一个项目。而且能够在浏览器中查看。
如今我们来看看js类载入过程。
例如以下图所看到的：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamZvaw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
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文件。