开始使用sencha touch

Sencha Touch 是什么

Sencha Touch是一种高性能HTML5移动应用程序框架。可以使用Sencha Touch生成native-app-like（仿本地应用）在浏览器或混合壳上运行。Sencha Touch支持Android,iOS,Windows Phone,微软Surface Pro和RT，和黑莓手机。

必备软件

1. Sencha Touch 要求Chrome和Safari浏览器。在任何移动设备上你都可以使用Chrome，Safari，或者IE10和11

2.Sencha Cmd。

3. JRE1.7。Sencha Cmd是用Java写的所以需要JRE环境才能运行。

4. Ruby，构建完整的CSS被Touch使用。

1. windows：去官网下载Ruby.exe文件，运行安装。

2. Mac：Ruby已经被预安装。你可以在终端命令ruby -v验证其版本。

3. Ubuntu：使用sudo apt-get install ruby2.0.0去下载安装。

5. 最好的Debugging工具是使用最新的浏览器像Chrome和Safari。

6. 通过命令行查看Sencha Cmd操作和版本。

7. 创建一个特殊的项目目录作为你的应用，并确保这个目录是可写的。

8. 启动Web服务。如果你要使用Sencha Cmd自己的Web容器，那就使用命令cd到你生成应用所在位置，使用“Sencha web start”命令。接着你就可以通过链接地址： http://localhost:1841/>ProjectName< URL访问应用程序。关闭服务使用CTRL+C，或者打开命令行输入“sencha web stop”。 

如果你使用的是Windows的IIS作为web服务器，需要手工添加“application/x-json”作为消息实体给Sencha Touch一个稳定的运行环境。查看如何添加这个消息实体请看下面链接：http://stackoverflow.com/a/1121114/273985

安装

解压下载的Sencha Touch  zip文件到你的项目路径下。

如果你正在使用Sencha Cmd的Web服务器，你可以把这个Sencha Touch压缩包解压在任何目录下面，并把Sencha Cmd服务容器指定在这个目录下。

如果你正在使用其他Web服务器，就将Sencha Touch压缩包解压到Web容器中。

你可以在浏览器地址栏导航到这个路径http://localhost/touch-n.n下看看Sencha Touch文档。

查看你已经正确的安装了Sencha Cmd，在终端切换路径cd到web容器下，在输入sencha命令行如下图所示。

$ cd ~/webroot/touch-n.n/
$ sencha
Sencha Cmd vn.n.n
...

生成你的第一个App

现在你已经安装了Sencha Touch和Sencha Cmd就可以生成一个应用了。

注意：当使用sencha命令行生成一个app时，你必须下载SDK目录或已生成的应用程序。详情请参阅Sencha Cmd文档。

此时终端还在Sencha Touch SDK文件夹下,输入以下:

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

本次生成一个Sencha Touch应用程序框架，以变量MyApp为命名空间并位于 ../MyApp目录（一个级别高于Sencha Touch SDK目录）。应用程序的框架包含了你要创建一个Sencha Touch应用的所有文件，这个本地包包括默认的index.html，一个Touch SDK拷贝文件，CSS文件，image和配置文件，都是提供给你的应用程序的。

如果您的应用程序已成功生成，通过打开一个web浏览器来验证。假设你已经提取SDK webroot文件夹,您应该能够导航到http://localhost/MyApp打开你的应用。

注意：如果在Linux使用命令行失败，那就使用root权限作为一个普通用户重装Sencha Cmd

代码开发

在Sencha Cmd文档可以发现生成文件的完整列表，下面的清单为每个文件和目录提供了一个简短的描述。

• app -这个文件夹包含了Models，Views，Controllers, 和 Stores 文件。
• app.js-这个JavaScript是作为你的应用的主要入口点。
• app.json-配置文件。
• index.html-HTML文件.
• packager.json-当使用Sencha Cmd创建本地应用的时候的配置文件。
• resources-这个目录包含CSS 和images文件。

用编辑器打开入口文件app.js。

这个Launch方法正是你的应用的入口。这个方法在默认的应用程序中隐藏了应用程序加载指标,并给我们的主要视图创建一个实例,并将它添加到视窗Viewport。

这个视窗是一个卡片式的布局，你可以直接在上面添加组件。默认应用程序将这个视窗(Mainview)作为主视图添加到窗口,就在屏幕上可见了。

看看这个Mainview文件的代码.

使用你的编辑器打开app/view/Main.js，改一下下面的title标签：

title: 'Home Tab'

接着改成如下面所示的样子：

title: 'Woohoo!'

继续按照下面的样子改：

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

刷新你的浏览器上的应用地址看看你的变更的效果。

下一步

遵循本指南的第一个应用程序向导,帮助您创建一个简单但功能强大的应用程序只需要在15分钟左右。
　　
　　如果你想跳过开头或想找关于这个框架的其他方面的 更详细的信息，查看以下指导和资源:

向导

• Sencha Touch里最新的东西
• 组件和容器
• 应用介绍
• 系统布局
• 数据包

应用实例

• Kitchen Sink

组件例子

• Carousel
• Forms
• Date Picker