1.什么是Sencha Touch？
Sencha Touch让您能够快速、轻松地创建基于HTML5的移动应用程序，在Android、iOS和黑莓设备中工作，并运行在浏览器中与本地应用程序一致的体验。
2.开始
首先，你需要从Sencha网站下载免费的Sencha Touch 2 SDK和SDK工具，你还需要：
在你的计算机中运行的本地web服务器
一个现代浏览器，建议使用Chrome或Safari。
如果你在Windows中运行IIS，请注意您必须添加MIME类型application/x-json后Sencha Touch才可以正常工作，相关信息详见：http://stackoverflow.com/a/1121114/273985
3.安装
首先, 将SDK zip文件解压到你的项目目录，通常，这个文件夹在你的HTTP server中能够访问。例如，你应该能够从您的Web浏览器访问到http://localhost/sencha-touch-2.0.0-gpl和Sencha Touch文档。
您还需要进行SDK工具安装。 SDK工具将Sencha命令行工具添加到系统路径，这样就可以产生一个新的应用程序模板，其中包括。要检查您是否已经安装了SDK中的工具，改变您的Sencha Touch目录，并键入Sencha命令。例如：
$ cd ~/webroot/sencha-touch-2.0.0-gpl/ $ sencha Sencha Command v2.0.0 for Sencha Touch 2 Copyright (c) 2012 Sencha Inc. ...
注意：您使用Sencha命令时，必须在下载的SDK目录或生成的Touch应用程序目录内。
4.生成你的第一个应用
现在用你安装的Sencha Touch和SDK工具，来生成应用程序。确保你依然在Sencha Touch SDK文件夹内，然后键入下面的命令：
$ sencha generate app GS ../GS [INFO] Created file /Users/nickpoulden/Projects/sencha/GS/.senchasdk [INFO] Created file /Users/nickpoulden/Projects/sencha/GS/index.html [INFO] Created file /Users/nickpoulden/Projects/sencha/GS/app.js ...
这将产生一个Sencha Touch骨架应用程序命名空间的GS变量（入 门），位于在目录/ GS（Sencha Touch SDK目录的上一层）。骨架应用程序中包含所有文件，您需要创建一个Touch应用程序，包括默认 index.html，复制Touch SDK、CSS、图像和配置文件到本地应用程序包内。
我们检查，你的应用程序是否已经成功生成可以在Web浏览器中打开它。假设你在Web根目录文件夹中提取的SDK，你应该能够访问http://localhost/GS和默认的应用程序：
5.探索代码
使用你喜欢的IDE或文本编辑器打开GS目录。目录结构看起来像这样：
这里的每个文件和目录的描述：
-
app-目录，其中包含您的应用程序的模型，视图，控制器和存储。
-
app.js-主要的Javascript是您的应用程序的入口点。
-
app.json-应用程序的配置文件 - 通过Builder创建您应用程序一个压缩后的版本。
-
index.html-应用程序的默认HTML入口文件
-
packager.json-该配置文件使用Packager创建你的应用程序的iOS和Android原生版应用程序商店。
-
resources-应用程序资源目录，其中包含CSS和图像
-
sdk-Sencha Touch SDK。你不需要更改此文件夹的内容。
在编辑器中打开app.js，应用程序的主入口点。
launch function是应用程序的入口点。在默认的应用程序中，我们需要首先隐藏应用程序的加载指示器，然后创建一个实例，我们的主视图，并把它添加到Viewport。
Viewport是卡布局，您可以将组件添加到您的应用程序。默认的应用程序添加主视图Viewport的，所以它在屏幕上是可见的。让我们来看看在主视图里面的代码。
在代码编辑器中打开app/view/Main.js 编辑第10行代码:
title: 'Home Tab'
现在修改第19行代码:
title: 'Woohoo!'
另外, 修改22-26行代码:
html: [
"I changed the default <b>HTML Contents</b> to something different!"
].join("")
现在刷新浏览器中的应用程序然后观察有什么改变:
6.下一步
下一步是按照入门应用指南，这建立在你刚刚做了什么，并引导您在15分钟内创建一个简单但功能强大的应用程序。您也可以按照本指南的视频。
如果你想跳过前面的框架，我们建议您查看下面的指南和资源获取更详细的信息：
Guides 指南
Components and Containers 组件和容器
Intro to Applications 应用程序简介
The Layout System 布局系统
The Data Package 数据包
What's New in Sencha Touch 2 Sencha Touch 2新功能
Application Examples 应用程序实例
Kitchen Sink
Kiva
Component Examples 组件实例
Carousel 滑动
Forms 表单
Date Picker 日期选择器
Sencha Touch 2官方文档地址：http://docs.sencha.com/touch/2-0/#!/guide/getting_started
原创翻译，转载请注明原文链接：http://www.9it.me/article-177.html