Sencha Touch 2快速入门教程（ST2）

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才可以正常工作，相关信息详见：upload/2014/12/201412021500351875.png" alt="Sencha Toucha 2默认应用程序" width="506" height="554" border="0" >

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 

    Twitter

    Kiva

Component Examples 组件实例

    Carousel 滑动

    Forms 表单

    Date Picker 日期选择器

Sencha Touch 2官方文档地址：http://docs.sencha.com/touch/2-0/#!/guide/getting_started