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文件中，这样，在生成时，只需打包一个样式文件，不用管理多个样式文件了。

   

 

   

转载于:https://www.cnblogs.com/yulingjia/p/7168602.html