接着上一讲，通过index.html里development.js对app.json里js资源文件的解析，app.js便被index.html引入了，
app.js是整个项目的程序入口，在项目完成时使用sencha cmd打包压缩项目时，默认情况下所有的js文件都会被压缩成一行放置在app.js中，关于项目的打包我们会在后面的课程详细讲解，
接下来我们来看下app.js，了解下整个项目是如何通过app.js来进行加载的。
1 //用来实例化Ext.app.Application，这是项目中唯一一个只要创建一次且不需要通过Ext.create来进行实例化的类， 2 //它会在Ext.application内部进行实例化， 3 //Ext.app.Application用来定义 Models, Controllers, Profiles, Stores 和 Views模块类文件的集合， 4 //当定义的这些文件被载入完毕时会触发里面的launch方法， 5 //我们一般在launch方法中创建我们的主视图 6 Ext.application({ 7 8 //name属性表示项目名称，这个名称不能有空格也不能有标点符号， 9 //它将作为整个项目的全局命名空间，所有的类文件都必须以它开头，例如在这里我们的name为MyFirst, 10 //那么当我们定义其他类文件的时候 就必须用'MyFirst.model.User', 'MyFirst.controller.Users', 'MyFirst.view.Main' 等等 11 name: 'MyFirst', 12 13 //因为我们调用的是sencha-touch.js核心库，所以当你需要使用的功能不在核心库中的时候 14 //我们需要使用requires来引入该功能对应的js文件，当我们使用用sencha cmd打包压缩项目文件时，cmd工具会自动关联该js文件并将其内容打包到 15 //app.js中，虽然在开发过程中，不引入对应的js文件程序能够正常运行，程序在找不到指定js的时候会到touch文件夹下去自动查找源码文件关联， 16 // 但在浏览器的console窗口中会报警告，且在最终打包项目后程序将无法运行，所以开发过程中确保你的浏览器窗口中没有requires的警告 17 // 使用requires还有一个作用就是延迟加载， 18 //requires属性可以在所有的类文件中定义，当使用了requires属性的类被实例化时，如果该类中requires的js没有被加载这时就会立刻加载该requires的js文件 19 requires: [ 20 'Ext.MessageBox' 21 ], 22 23 //引入视图组件类文件 24 views: [ 25 'Main' 26 ], 27 28 //定义应用程序图标，sencha cmd打包安装程序时有效 29 icon: { 30 '57': 'resources/icons/Icon.png', 31 '72': 'resources/icons/Icon~ipad.png', 32 '114': 'resources/icons/Icon@2x.png', 33 '144': 'resources/icons/Icon~ipad@2x.png' 34 }, 35 36 //设定ios图标的镜面效果 37 isIconPrecomposed: true, 38 39 //设定应用程序启动图，这个属性只支持ios设备 40 startupImage: { 41 '320x460': 'resources/startup/320x460.jpg', 42 '640x920': 'resources/startup/640x920.png', 43 '768x1004': 'resources/startup/768x1004.png', 44 '748x1024': 'resources/startup/748x1024.png', 45 '1536x2008': 'resources/startup/1536x2008.png', 46 '1496x2048': 'resources/startup/1496x2048.png' 47 }, 48 49 //当application定义的资源文件都载入完毕时， 50 //会调用launch函数 51 launch: function() { 52 // 销毁启动动画，项目启动时的那三个闪烁点，可根据情况需要进行修改 53 Ext.fly('appLoadingIndicator').destroy(); 54 55 // 初始化主视图文件，在这里创建了view文件夹下的Main视图并添加到 56 //viewport视口中，viewport继承自container，默认全屏属性和card布局 57 //在项目启动时自动创建 58 Ext.Viewport.add(Ext.create('MyFirst.view.Main')); 59 }, 60 61 //项目使用sencha cmd的sencha app build production指令打包成webapp时会生成html5离线缓存文件 62 //当项目第一次访问后就会将项目缓存到本地，用户可以离线访问， 63 //在服务端的代码进行修改后重新打包成production发布时，浏览器端检测到代码更新后会调用 64 //该方法提示用户是否更新，确认更新后页面会自动刷新并缓存最新内容 65 onUpdated: function() { 66 Ext.Msg.confirm( 67 "Application Update", 68 "This application has just successfully been updated to the latest version. Reload now?", 69 function(buttonId) { 70 if (buttonId === 'yes') { 71 window.location.reload(); 72 } 73 } 74 ); 75 } 76 });
Ext.application中用来定义Models, Controllers, Profiles, Stores 和 Views模块类文件的集合，
sencha cmd生成的项目代码中暂时只定义了view视图的资源文件，
views: [ 'Main' ],
这相当于在全局的命名空间下，给指定的文件名增加了一个子命名空间view，
所以这段代码对应的文件是定义的名称为MyFirst.view.Main类文件,
注意：文件夹下的js文件以及类名一定要对应，否则在启动项目时将找不到对应的js文件
例如我定义的类Ext.define("MyFirst.view.Main")，那么程序会到view文件夹下去查找Main.js文件，如果名称不匹配，那么会查找不到文件并报错
即app文件夹下的view文件夹下的Main.js文件，
如果我们定义的views如下：
views: [ 'my.Main' ]
那么，在application初始化的时候会到MyFirst项目下的app目录下的view文件夹下的my文件夹查找文件，按照层级结构来查找
默认情况下，这段代码定义的文件会去访问查找app文件夹下去查找对应文件夹，
你也可以通过在Ext.application里定义appFolder属性来重新指定这个文件夹，
例如我设定appFolder:"test"，
那么上面的views属性定义的内容我们的程序将会到test文件夹下去查找
Main.js也就是创建我们打开项目时所看到的那个界面的文件了，
这个文件我们先不讲解，在没有对js的类文件系统有一定得了解前，有些内容可能难理解，
所以下一讲我们会详细介绍sencha touch的类系统，以便接下来我们对model，view，store，profile，controller这些模块的学习