第一天（Getting Started with Sencha Touch）

原文地址：http://docs.sencha.com/touch/2.2.0/#!/guide/getting_started

什么是sencha touch?

sencha touch 能够让你快速、容易的构建以html5为基础运行于手机设备上的app应用，并且使运行于浏览器或者混合型脚本中的app具有原生app相似的用户体验。它支持安卓、ios、windows phone、Microsoft Surface Pro and RT以及黑莓设备。
前提Download the free Sencha Touch SDK and Sencha
Cmd from the Sencha website. Sencha Cmd also installs Ant, Ruby, Sass, and Compass, which you can use to build applications and other useful tasks.从sencha的官网上下载免费的sencha touch sdk及cmd命令终端。cmd终端同事安装了ant、ruby、sass及compass，以便你能够使用它来构建应用及完成其它一些功能。同时，你还需如下一些工具：运行于你本机的web 服务器，如xampp
一个现代化的浏览器，推荐使用chrome、safari如果你用的是windows的iis 服务器，为了使sencha touch正常工作，请将application/x-json手动添加作为一种MIME
Type。你可以在这个网址上看到更多添加MIME type的信息：http://stackoverflow.com/a/1121114/273985

安装

将sdk压缩文件解压至你的项目目录下。最好该目录位于http服务器目录下，例如，你能够流通浏览器访问http://localhost/sencha-touch-2.n ，并访问sencha touch的文档。运行sencha cmd安装程序。该安装程序会添加sencha 命令工具至环境变量，使你当前处于其它路劲时依旧能够产生一个新的应用程序模板。为了检查你是否已正确安装sencha cmd终端，切换至sencha touch根路径下，运行senchacommand，如：

$ cd ~/webroot/sencha-touch-2.n/
$ sencha
Sencha Cmd v3.1.n
...

注意：当使用sencha命令时，当前路径必须位于sdk根路径或者一个已经生成好了的sencha app目录下（对这段有异议，我试了下，一旦安装了cmd终端，不在该路劲下也是能够运行该命令的，故保留该段英文）。更多信息请查看sencha cmd文档。Note When using the

sencha

command,
you must be
inside either the downloaded SDK directory or a generated Touch app. For further details see theSencha
Cmd documentation.

创建你的第一个app应用

现在你已经安装了sencha touch和sencha cmd终端，你可以创建应用程序了。在cmd命令至sdk路径下，键入如下命令：

$ sencha generate app MyApp ../MyApp
[INFO] Created file ...
...

上面的命令在

../MyApp

目录(sdk的上一级目录)创建了一个名为MyApp的sencha touch骨架.这个骨架包含了你创建sencha touch应用所需要的一切文件，包括默认的index.html文件，sdk的一份拷贝，css文件，图片及为你的app创建本地包的配置文件。你可以通过在浏览器里打开刚才创建的应用来验证它是否成功创建。假设你将sdk至于webroot目录，那么你应该可以访问

http://localhost/MyApp。

代码研究

下面的列表对各文件及目录提供了一个简单的说明，完整的文件列表描述可以在sencha cmd文档中找到。app-这个目录包含模型、视图、控制器及数据存储
app.js - 你的app主要的js入口点
app.json - 你的app的配置文件
index.html - 你的app的html文件

packager.json

-
sencha cmd用来为你的app创建本地包的配置文件

resources

-
包含css、image的文件夹打开app入口点的app.js文件。launch函数是你的应用的入口点。在默认的程序中，隐藏程序加载标志，为我们的主页创建一个实例，并且将它加入到viewport中。Viewport是一个卡片布局，你可以向里面添加应用程序组件。默认的程序将Main View添加到viewport中，所以在屏幕上它是可见的。Look at the code inside the Main view.看下Main View中的代码。打开app/view/Main.js文件，找到如下这一行：

title: 'Home Tab'

改变title这一行为如下内容：

title: 'Woohoo!'

更改如下内容：

html: [
"I changed the default <b>HTML Contents</b> to something different!"
].join("")

在浏览器中刷新你的app并且观察效果。

下一步

接下来依据第一个app创建的向导，在该向导的基础上，根据向导在15分钟内创建一个简单但是强大的app。如果你想跳过开始的部分或者找出更多该框架的更多信息，查看如下向导和资源（下面的就不翻译了）：

Guides

What's New in Sencha Touch
Components and Containers （第二天）
Intro to Applications （第三天）The Layout System （第四天）The Data Package （第五天）

Application Examples

Kitchen Sink
Twitter
Kiva

Component Examples

Carousel
Forms
Date Picker第一次干这种工作，好长时间没用英语了，有些地方翻译的不够好，还请大家多加指正！好了，时间不早了，睡觉去了！