接着上一讲,通过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这些模块的学习

sencha touch 入门系列 (六)sencha touch运行及代码解析(下)的更多相关文章

  1. sencha touch 入门系列 (九) sencha touch 布局layout

    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...

  2. sencha touch 入门系列 扩展篇之sencha touch 项目打包压缩

    经常有新手同学抱怨说sencha touch的项目加载速度为什么这么慢,经常要10秒左右的时间甚至更多, 大家都知道,sencha touch开发的项目中引用了大量的js文件,当我们打开项目时,st的 ...

  3. vue 快速入门 系列 —— 使用 vue-cli 3 搭建一个项目(下)

    其他章节请看: vue 快速入门 系列 使用 vue-cli 3 搭建一个项目(下) 上篇 我们已经成功引入 element-ui.axios.mock.iconfont.nprogress,本篇继续 ...

  4. sencha touch 入门系列 (二)sencha touch 开发准备

    这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题.接下来我们就开始我们的sencha touch开 ...

  5. sencha touch 入门系列 (七)sencha touch 类系统讲解(上)

    在mvc结构的基础上,sencha touch又使用了sencha公司为extjs4开发出来的类系统,在面向对象的编程语言中,类是对对象的定义,它描述了对象所包含的大量属性和方法. 跟面向对象语言类似 ...

  6. Go语言入门系列(六)之再探函数

    Go语言入门系列前面的文章: Go语言入门系列(三)之数组和切片 Go语言入门系列(四)之map的使用 Go语言入门系列(五)之指针和结构体的使用 在Go语言入门系列(二)之基础语法总结这篇文章中已经 ...

  7. sencha touch 入门系列 (五)sencha touch运行及代码解析(上)

    由于最近项目比较忙,加之还要转战原生开发,所以很久没更新了,今天我们接着上一次的内容往下讲: 首先我们打开index.html,这是我们整个程序的访问入口,也是整个项目的引入地: <!DOCTY ...

  8. sencha touch 入门系列 (四)sencha touch 新建项目目录结构解析

    通过上一章节的操作,我们的项目已经创建完成了, 大家通过http://127.0.0.1/MyFirst/应该都已经访问到了自己的应用, 接下来,我们展开我们项目,如图所示: 一.目录结构 1. .s ...

  9. sencha touch 入门系列 (三)sencha touch 项目创建

    通过上一章节的学习,我们的开发环境已经配置好了,接下来我们开始创建第一个sencha touch的项目,网络上很多sencha touch的教程都是手动搭建项目的, 不过手动搭建的项目缺少一些senc ...

随机推荐

  1. LACP-链路聚合

    一. 术语 LA (Link aggregation): 链路聚合,不同厂家名称不同,ethernet channel(以太通道). LAG: Link aggregation group. LACP ...

  2. 人脸识别技术大总结1——Face Detection & Alignment

    搞了一年人脸识别,寻思着记录点什么,于是想写这么个系列,介绍人脸识别的四大块:Face detection, alignment, verification and identification(re ...

  3. Config文件的使用:通过程序修改Config文件

    对于config文件,一般情况下都是使用ConfigurationManager加载,然后通过读取相应节点的值来获取想要的数据,但是,有时候需要修改config文件的值,这时候就用到了OpenExeC ...

  4. 使用powerdesinger逆向生成表结构

    (1).使powerdesigner建立和数据库的链接 (2)配置链接详情 (3) (4) (5)更新表结构 (6) (7) 附加:当有时候会报错时: 解决方式: (1.1)更改所连接的数据库 (1. ...

  5. android EditText设置光标、边框和图标,以及限制输入

    控制边框形状,先在drawable中建一个xml文件:shape.xml <?xml version="1.0" encoding="utf-8"?> ...

  6. (四)Qt实现自定义模型基于QAbstractTableModel (一般)

    Qt实现自定义模型基于QAbstractTableModel 两个例子 例子1代码 Main.cpp #include <QtGui> #include "currencymod ...

  7. HTTP/1.1 学习

    发现对于HTTP协议不能脱口而出,故而怒翻资料,RFC2616 . 在其abstract中是这么说HTTP的,应用层协议,generic.无状态.其特点之一是 the typing and negot ...

  8. PHP实现金额数字转换成大写函数

    <?php header("Content-Type:text/html;charset=utf-8"); function num_to_upper($num) { $d ...

  9. squid2.7安装与配置

    CleverCode近期研究了一下squid的安装与配置. 如今总结一下.分享给大家. 1 简单介绍 代理server英文全称是Proxy Server,其功能就是代理网络用户去取得网络信息. Squ ...

  10. oracle解决多表关联分组查询问题

    做了一个功能需要分组查询,同时查询A表分组查询的ID需要关联B表的数据,本来想两个表关联查询,但是报group by 语法不正确.所以做了以下修改. select count(*), cindexid ...