sencha touch 入门系列 （六）sencha touch运行及代码解析（下）

 接着上一讲，通过index.html里development.js对app.json里js资源文件的解析，app.js便被index.html引入了，

 app.js是整个项目的程序入口，在项目完成时使用sencha cmd打包压缩项目时，默认情况下所有的js文件都会被压缩成一行放置在app.js中，关于项目的打包我们会在后面的课程详细讲解，

 接下来我们来看下app.js，了解下整个项目是如何通过app.js来进行加载的。

　　

//用来实例化Ext.app.Application，这是项目中唯一一个只要创建一次且不需要通过Ext.create来进行实例化的类，
//它会在Ext.application内部进行实例化，
//Ext.app.Application用来定义 Models, Controllers, Profiles, Stores 和 Views模块类文件的集合，
//当定义的这些文件被载入完毕时会触发里面的launch方法，
//我们一般在launch方法中创建我们的主视图
Ext.application({

    //name属性表示项目名称，这个名称不能有空格也不能有标点符号，
    //它将作为整个项目的全局命名空间，所有的类文件都必须以它开头，例如在这里我们的name为MyFirst,
    //那么当我们定义其他类文件的时候 就必须用'MyFirst.model.User', 'MyFirst.controller.Users', 'MyFirst.view.Main' 等等
    name: 'MyFirst',

    //因为我们调用的是sencha-touch.js核心库，所以当你需要使用的功能不在核心库中的时候
    //我们需要使用requires来引入该功能对应的js文件，当我们使用用sencha cmd打包压缩项目文件时，cmd工具会自动关联该js文件并将其内容打包到
    //app.js中，虽然在开发过程中，不引入对应的js文件程序能够正常运行，程序在找不到指定js的时候会到touch文件夹下去自动查找源码文件关联，
    // 但在浏览器的console窗口中会报警告，且在最终打包项目后程序将无法运行，所以开发过程中确保你的浏览器窗口中没有requires的警告
    // 使用requires还有一个作用就是延迟加载，
    //requires属性可以在所有的类文件中定义，当使用了requires属性的类被实例化时，如果该类中requires的js没有被加载这时就会立刻加载该requires的js文件
    requires: [
        'Ext.MessageBox'
    ],

    //引入视图组件类文件
    views: [
        'Main'
    ],

    //定义应用程序图标，sencha cmd打包安装程序时有效
    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    //设定ios图标的镜面效果
    isIconPrecomposed: true,

    //设定应用程序启动图，这个属性只支持ios设备
    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    //当application定义的资源文件都载入完毕时，
    //会调用launch函数
    launch: function() {
        // 销毁启动动画，项目启动时的那三个闪烁点，可根据情况需要进行修改
        Ext.fly('appLoadingIndicator').destroy();

        // 初始化主视图文件，在这里创建了view文件夹下的Main视图并添加到
        //viewport视口中，viewport继承自container，默认全屏属性和card布局
        //在项目启动时自动创建
        Ext.Viewport.add(Ext.create('MyFirst.view.Main'));
    },

    //项目使用sencha cmd的sencha app build production指令打包成webapp时会生成html5离线缓存文件
    //当项目第一次访问后就会将项目缓存到本地，用户可以离线访问，
    //在服务端的代码进行修改后重新打包成production发布时，浏览器端检测到代码更新后会调用
    //该方法提示用户是否更新，确认更新后页面会自动刷新并缓存最新内容
    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

 

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这些模块的学习