Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南

官方英语原文：http://docs.sencha.com/touch/2.3.1/#!/guide/getting_started

What is Sencha Touch?

初识Sencha Touch

Sencha Touch is a high-performance HTML5 mobile application framework. You can use Sencha Touch to produce a native-app-like experience inside a browser or in a hybrid shell. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and
BlackBerry devices.

Sencha Touch是一个高性能的HTML5移动应用（开发）框架，你可以使用Secha Touch来建立一个内嵌在浏览器或者混合外壳中的拥有着有如本地应用体验一样的移动应用。 Sench Touch支持安卓，iOS，Windows手机，Microsoft Surface Prop和RT，以及黑莓设备。

Required Software

软件需求

1. Download and unzip Sencha Touch. You can unzip the software to any directory.
2. 下载并解压Sencha Touch， 你可以把它解压到任何目录下面
3. Sencha Touch requires Chrome or Safari.
   On a mobile device, you can use Chrome, Safari, or Internet Explorer 10 or 11.
4. Sencha Touch(在开发机器端)需要Chome或者Safari的支持。在一个移动设备上面，你也可以用Chrome，Safari，或者IE 10或者11来运行。
5. Sencha Cmd.
   | Sencha Cmd

   Sencha Touch 2.3.1 requires Sencha Cmd 4.0.1, 4.0.2, or later. To check that you have correctly installed Sencha Cmd, type the sencha command,
   for example:

6. Sencha Touch 2.3.1需要Sencha Cmd 4.0.1, 4.0.2以及更高版本的支持。你可以在命令行中输入sencha命令来检查你的系统上是否已经正确安装了Sencha Cmd，比如：

7. $ sencha
   Sencha Cmd vn.n.n
   ...
   

8. Java Runtime Environment version 1.7. Sencha Cmd is written in Java and needs
   the JRE to run. Note: If you are building an Android app using Windows, you must install the Java
   SDK. You can build an iOS app under Windows with the JRE, but not an Android app. |
9. Java Runtime Environment版本1.7的支持。Sencha
   Cmd是使用Java编写的所以需要JUE的支持才能运行。注意：如果你是使用Windows来打造一个Android应用，你必须安装的是Java SDK。如果在Windows使用JRE的话，你只能打造iOS应用，而不能支持Android应用。
10. Ruby to create the compiled CSS used by Touch.
11. Sencha Touch用来编译CSS的编译器 - Ruby的支持。
    • Windows: Download Ruby from rubyinstaller.org. Download the RubyInstaller .exe file
      and run it.
    • Windows：从rubyinstaller.org中下载Ruby。下载完RubyInstaller.exe后直接运行即可。
    • Mac: Ruby is pre-installed. You can verify its presence with the ruby -v command.
    • Mac：在Mac上Ruby是已经预安装了的。你可以执行命令ruby -v来检查Ruby是否存在。
    • Ubuntu: Use sudo apt-get install ruby2.0.0 to download and install Ruby.
    • Ubuntu： 请使用命令"sudo apt-get install ruby2.0.0"来下载并安装Ruby。

If you are running the IIS web server on Windows, manually add application/x-json as a MIME Type for Sencha
Touch to work properly. For information on adding this MIME type see the following link: http://stackoverflow.com/a/1121114/273985.

如果你使用的是Windows的IIS作为网络服务器，请手动把“application/x-json"这个MIME类型增加到IIS的MIME支持列表里面以便Sencha Touch可以正常工作（天地会珠海分舵注：在你的IIS网页配置管理中会有一个MIME配置图标来允许你进行这般设置）。关于如何增加MIME类型的知识请查看以下链接： http://stackoverflow.com/a/1121114/273985。

以下是天地会珠海分舵Win 2008上的IIS管理控制台的MIME位置示例：

Installation

安装

Extract the Sencha Touch download zip file, which can be in any directory.

把下载下来的Sencha Touch的zip文件解压出来，你可以解压到任何目录下面。

Start your web server. If using the Sencha Cmd web server, change directory to the location from which you want to serve your application, and start the Sencha Cmd web server with the sencha web start command. To stop the web server, press CTRL+C, or open another
command line window and type sencha web stop.

启动Web服务器。如果你使用的是Sencha Cmd的Web服务器，请在命令行中定位到服务器需要服务的你的应用目录下面(天地会珠海分舵：比如你的应用是通过以下命令生成的”sencha generate app MyApp ../MyApp", 那么你就先cd到../MyApp这个目录下面)，然后使用Sencha
Cmd的"sencha web start"命令来启动Web服务器。关闭该服务器的话你只需要发送CTRL+C组合键就好了，当然，你也可以通过打开另外一个命令行console来发送“sencha web stop”命令来关闭该Web服务器。

If you are using another web server such as XAMPP (a pre-configured Apache HTTP server), create an app directory where
your web server expects to find apps. In the case of XAMPP, it‘s the <XAMPP_install_dir>/htdocs directory.

如果你使用的是另外一种Web服务器，比如XAMPP(一个预配置好的Apache HTTP服务器)，请先创建一个你的Web服务器将在其下面查找应用的应用目录，如在XAMPP中，该目录应该存在于<XAMPP安装目录>/htdocs下面。

Generating Your First App

生成您的第一个应用

Now that you have Sencha Touch and Sencha Cmd installed, you can generate an application.

一旦你安装了Sencha Touch和Sencha Cmd，你就可以生成一个应用了。

Choose or create a directory where your application will reside, change to that directory, and issue the following command:

选择或者创建一个将要包含你的应用程序文件的目录，然后cd到该目录下面，最后执行以下命令：

$ sencha -sdk /path/to/touch generate app MyApp .

Where:

在该命令中：

1. /path/to/touch is the directory where you unzipped the Touch software.
2. /path/to/touch就是Touch Sencha解压目录
3. MyApp is the name you give your application.
4. MyApp就是你的应用的名称

This generates a skeleton Sencha Touch application namespaced to the MyApp variable and located in the
current directory.

这个命令会在当前目录下创建一个命名空间为MyApp的Sencha Touch应用的一个框架。

The skeleton app contains all the files you need to create a Sencha Touch application, including the default index.html file, a copy of the Touch SDK, the CSS file, and images and configuration files for creating native packages for your app.

该框架将包含你创建一个Sencha Touch应用所需要的所有文件，包括默认的index.html文件，Touch SDK的一个copy，CSS文件，以及你去创建一个应用所需的图片资源和配置文件。

You can verify if your application has generated successfully by opening it in a web browser. If you extracted the SDK to your webroot folder, navigate to http://localhost/MyApp.
If you are using the Sencha Cmd web server, you can access served applications with the http://localhost:1841/URL.

你可以通过打开一个浏览器来验证你的应用是否正确生成。如果你的SDK是解包到其他的Web服务器的webroot文件夹下面的，请定位到http://localhost/MyApp。如果你使用的Sencha Cmd的Web服务器的话，你可以直接通过以下URL来访问你的应用：http://localhost:1841/URL

Note: If this command fails in Linux, re-install Sencha Cmd as a normal user versus installing with root privileges.

注意：如果以上的应用生成命令在Linux下运行失败的话，请重新在你的Linux下面以普通用户的权限安装Sencha Cmd而不是用Root用户。

Explore the Code

代码文件探究

The following listing provides a short description of each file and directory, the complete list of the generated files can be found in the Sencha
Cmd documentation:

下面的列表提供了对生成的应用目录下面的所有文件和目录的简短描述，至于生成的文件列表的完整描述请查看Sencha Cmd文档。

• app - The directory containing the Models, Views, Controllers,
  and Stores for your app.
• app - 该目录包含了你的应用所用到的(MVC)的Models，Views，Controllers，以及Stores。
• app.js - The main JavaScript entry point for your app.
• app.js - 你的应用的主入口Javascript代码文件。
• app.json - The configuration file for your app.
• app.json - 你的应用的配置文件。
• index.html - The HTML file for your app.
• index.html - 你的应用的HTML文件
• packager.json - The configuration file used by Sencha Cmd for
  creating native packages for your application.
• packager.json - Sencha Cmd用来创建原生应用包所用到的配置文件。
• resources - The directory containing the CSS and the images for
  your app
• resources - 你的应用所用到的CSS和图片都会存放在该目录下面。

Open app.js, the main entry point for your app, in your editor.

请在编辑器上打开app.js这个你的应用的主入口文件

The launch function is the entry point to your application. In the default application, hide the application
loading indicator, and create an instance of our Main view and add it to the Viewport.

其中的”launch“方法就是你的应用的入口。在生成的默认应用中，隐藏掉应用加载指示器，然后创建我们Main view的一个实例，最后把它加入到Viweport里面。

The Viewport is a Card layout to which you can add application components.
The default app adds the Main view to the viewport so it becomes visible on the screen.

Viewport代表的是卡片式布局，你可以在这布局里面添加其他组件。默认生成的应用把 Main view加入viewport里面，使得它可以在窗口中变得可见。

Look at the code inside the Main view.

请查看Main view的代码细节。

Open app/view/Main.js in your code editor and change a title line to:

请在你的代码编辑器上打开app/view/Main.js，然后把title改成如下：

title: ‘Home Tab‘

Then change another line as follows:

然后把另外一行改成：

title: ‘Woohoo!‘

Also, change lines as follows:

并且把往下的几行改成如下所示：

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

Refresh the app in your browser to see the effects of your changes.

最后在浏览器上刷新该应用来查看修改后的效果。

Next Steps

下一步

Follow the First Application guide, which builds on this guide, and helps you create a simple but powerful
app in around 15 minutes.

请按照基于本向导的”第一个应用向导“来帮助你在大概15分钟内创建一个简单但强大的应用。

Note: As a good practice, when you create an application, keep a copy of your app.js file
as Sencha Cmd also updates this file.

注意：作为一个良好的实践经验，当你创建一个应用之后，请拷贝一份你的app.js文件，因为Sencha Cmd会对该文件进行更新。

If you would like to skip ahead or find out more detailed information about other aspects of the framework, view the following guides and resources:

如果你想先跳过第一个应用向导而去找到更多的Sencha Touch框架各方面的详细信息，请查看下面的一些向导和资源链接：

Guides

向导

• What‘s New in Sencha Touch
• Sencha Touch最新消息
• Components and Containers
• 组件和容器
• Intro to Applications
• 应用引言
• The Layout System
• 布局系统
• The Data Package
• 数据包

Application Examples

应用示例

• Kitchen Sink

Component Examples

组件示例

• Carousel
• Forms
• Date Picker