sencha touch 目录结构

1.index.html

整个html 中只加载一个 development.js

2.development.js

development.js会根据app.json中的样式和脚本定义来加载样式和脚本

好处是避免经常修改页面的link和script标签，通过一个统一的配置文件来实现所需要的操作

还有一个作用就是在打包的时候，打包程序也可以根据该文件去获取要打包的脚本和样式

3.配置app.json

第一个配置项是 name

该项是应用程序的命名空间

第二个配置项是 indexHtmlPath

应用程序的启动页面，设置时要注意与app,json的相对路径，一般情况下，路径是相同的，所以只需设计文件名

第三个配置项 url

这个配置要小心，如果数据或资源都是在本地，也就是可以基本按照localhost来运行，可以设置为null

如果是从远程服务器获取，那就要设置了

第四个配置项就是 js

用来要定义加载的js脚本文件，注意加载顺序，sencha-touch.js 必须放在第一位，然后就是app.js

path：每一个加载的js 都包含一个必须项 path 指定 js 的脚本路径，该路径为脚本文件与app.json文件之间的相对路径

remote：作用是在打包时，是否将该文件复制到包里，默认为false，表示是本地文件，需要复制到包里

否则，是远程文件，不需要复制到包里

update：作用是指定该文件是否需要更新

x-bootstrap：如果为true，就不会在生成时，将脚本文件复制到bulid目录，或在微加载时在生成的app.json中引用脚本文件

bundle：如果为true，在生成时所用类依赖的声明都不会加入到该文件

第五个配置项 css

定义css样式文件，设置与js基本相同

第六个配置 appCache

作用是在生成时，自动生成HTML5的应用程序cache manifest 文件，也就是将这些文件缓存起来，以便离线使用

第七个配置项是 resources

可用来配置在生成时要额外复制的资源文件，默认情况下，会复制resource目录下的images、icons和startup目录。

第八个配置项 ignore

作用是在生成时，定义复制操作要忽略哪些目录和文件，这里可使用正则表达式来定义忽略规则

第九个配置项是 archivePath

用来设置存档项目，默认情况下使用archive目录作为存档项目

第十个配置项是 id

它会被存储到localStorage中，如果手动创建应用程序，记得修改id

4.应用启动文件 app.js

使用ExtLoader的setPath方法来设置命名空间的路径

首先设置的是Ext路径，也就是框架命名空间的路径，接着，设置了当前应用程序的路径，将应用程序的命名空间与目录app关联起来

5.Ext.viewsport对象

在app.js的launch函数内，调用了Ext.viewsport对象的add方法来添加组件，而Ext.viewsport对象是从Ext.Container对象派生的，因而就造成了很多混乱。

Ext.viewport对象不会再页面中添加任何HTML元素，它只会修改Body元素的样式，并把Body作为一个容器。而这，就是在其他组件内嵌入Ext.viewport对象会出现错误的原因。

其次，Ext.viewport对象要从Ext.Container对象派生的原因是为了获得容器类的相关功能，如使用add方法添加组件，使用remove方法删除组件等功能

一个简单有效的理解Ext.viewport对象的方法是，把它看成是界面中组件树的顶层节点，在这个节点智商，不会再有组件，其他组件都是该节点的子节点

6.样式文件：app.css

在生成应用程序的时候，这样，可以避免过多的文件，也便于修改样式，在生成的时候，会重新将该文件编译成压缩格式。

如果需要添加自己的样式，可将样式直接追加到app.css文件中，这样，在生成时，只需打包一个样式文件，不用管理多个样式文件了。

巴特西

sencha touch 目录结构

最新文章

热门文章