第三天（Intro to Applications with Sencha Touch）

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

Intro to Applications with Sencha Touch
st应用程序简介

Sencha Touch is optimized for building apps that work across multiple platforms. To make writing apps as simple as possible, we provide a simple but powerful app architecture that leverages the Model View Controller (MVC) pattern. This approach keeps your code clean, testable, and easy to maintain, and provides you with a number of benefits when it comes to writing your apps:

st是为构建能够运行于多平台上的应用而设计的。为了使创建app尽可能的简单，我们提供了一个简单而强大的符合mvc模式的应用程序结构。该模型使得你的代码保持整洁、可测试的，并且容易维护，在创建你的app应用时给你提供一些列的好处：

• History Support: Enables you to navigate within your apps using back button support, and access any part of your app that can be linked to
• 历史记录的支持：通过使用back按钮，使你能够导航你的app应用，并可以访问任何可以链接的部分
• Deep Linking: Enables you to share deep links that open any screen in your app, just like linking to a web page
• 深度链接：使你能够共享app中打开的任何一个链接，就像在web 页面上样（没读懂到底啥意思）
• Device Profiles: Enables you to easily customize your app's UI for phones, tablets, and other devices, while sharing common code
• 设备配置文件：使你能够很容易的通过同一套代码为手机、平板及其他设备定制ui

Anatomy of an App
应用解剖

An app is a collection of Models, Views, Controllers, Stores, and Profiles, plus additional metadata for app-related entities, such as application icons and launch screen images.

一个应用时一些列模型、视图、控制器、存储、设备配置文件，加上其它一些相关实体元数据，如图标、图片等构成的。

Note In this guide, Application indicates an instance of Ext.application, whereas application or app is the program you're coding.

在下面的示例中，Application是Ext.application的一个实例，而application 或app是你所编写的应用程序。

• Models: represent a type of data object in your app - for example an e-commerce app might have models for User, Product, and Order
• 模型：代表了应用中的一种数据类型 - 如电子商务应用中可能含有用户、产品、订单模型
• Views: are responsible for displaying data to your users and for leveraging the built-in components in Sencha Touch
• 视图：负责向用户展现数据及构建st中的组件
• Controllers: handle interaction with your application, by listening for user interactions, such as taps and swipes, and taking action accordingly
• 控制器：通过监听用户交互，如轻击、重击，并采取相应的行动
• Stores: are responsible for loading data into your app and for powering components such as Lists and DataViews
• 存储：负责向应用中载入数据及填充组件如列表、数据视图
• Profiles: enable you to easily customize your app's UI for tablets and phones, while sharing as much code as possible
• 设备配置：在公用更多的代码情况下，让你更容易为平板、手机定制ui。

Application is usually the first entity you define in a Sencha Touch app, for example:

Application 在st应用程序中通常是第一个定义的实体类，例如：

Ext.application({
    name: 'MyApp',
    models: ['User', 'Product', 'nested.Order'],
    views: ['OrderList', 'OrderDetail', 'Main'],
    controllers: ['Orders'],

    launch: function() {
        Ext.create('MyApp.view.Main');
    }
});

The name is used to create a single global namespace for your entire app, including all of its models, views, controllers, and other classes. For example, an app called MyApp should have its constituent classes follow the pattern MyApp.model.User, MyApp.controller.Users, MyApp.view.Main, and so on. This keeps the entire app under a single global variable, thus minimizing the chance of other code on the same page conflicting with it.

name字段是为你的整个app创建一个全局唯一的命名空间，包含应用中所有的模型、视图、控制器及其他类。例如，一个叫Myapp的应用应该以这种形式包含它的各个构成类：MyApp.model.User,MyApp.controller.Users,MyApp.view.Main等等。这保证了真个app在一个全局唯一的变量下，最大程度的避免了同一页面的其它的代码与之冲突的问题。

The app uses the defined models, views and controllers configurations to automatically load these classes into your app. The classes follow a simple file structure convention - models are expected to be in the app/model directory, controllers in the app/controller directory and views inside the app/view directory - for example app/model/User.js, app/controllers/Orders.js and app/view/Main.js.

app通过对模型、视图、控制器定义的配置自动的载入这些类。这些类遵循一个简单的文件规范 -- 模型期望放在app/model目录下，控制器放在app/controller目录下，视图放在app/view目录下，例如app/model/User.js,app/controllers/Orders.js，app/view/Main.js。

Note that one of the models we previously specified is different than the others, in the sense that we specified its full class name ("MyApp.model.nested.Order"). We are able to specify the full class name for any of these configurations, if we do not follow the normal naming conventions. See the Dependencies section of the Ext.app.Application docs for details on how to specify custom dependencies.

注意，上面我们指定的模型与其它有点不同，即我们指定了类的全名（"MyApp.model.nested.Order"）。如果我们不遵守命名规范的话，那些配置我们都可以指定类全名。可以通过Ext.app.Application中的Dependences章节来查看指定用户依赖的详细信息。

Controllers
控制器

Controllers are the glue that bind an app together. Controllers listen for events fired by the UI and take an action based on the event. Using Controllers helps keep your code clean and readable, and separates the view logic from the control logic.

控制器是整合app各个部分的胶水。控制器监听ui触发的事件并采取相应的行动。使用控制器能偶保持你的代码的简洁性、可阅读性，能够将视图与控制逻辑分开。

For example, let's assume you require users to log in to your app via a login form. The view in this case is the form with all its fields and other controls. A controller should listen to the tap event on the form's submit button and perform the authentication itself. Anytime we deal with manipulating data or state, the controller should be the class that activates that change, not a view.

例如，假设你想让你的用户通过一个登陆窗口登陆进入你的应用。该例子中的视图是表单及表单中的字段及其他控制器。控制器应该坚定表单上提交按钮的单击事件并做校验。任何时候我们操作数据或改变状态，控制器应该是触发这些改变的类而不是视图。

Controllers expose a small but powerful set of features, and follow a few simple conventions. Each Controller in your app is a subclass of Ext.app.Controller- although you can subclass existing Controllers, as long as they inherit from Ext.app.Controller at some point. Controllers exist in the MyApp.controller.* namespace. For example, if your app has a Sessions controller, it would be called MyApp.controller.Sessions and would exist in the file, app/controller/Sessions.js.

控制器暴露了一小部分功能强大的特征，并遵从相应的规范。你的应用中的每一个控制器都是Ext.app.Controller的子类，尽管你可以继承已经存在的控制器，只要他们是在某处从Ext.app.Controller继承过来的。控制器存在于MyApp.controller.*命名空间下，例如，如果你的app有一个Sessions控制器，它会叫MyApp.controller.Sessions 并位于app/controller/Sessions.js文件中。

Although each Controller is a subclass of Ext.app.Controller, each one is instantiated only once by the Application that loaded it. At any time, there is only one instance of each Controller and the set of Controller instances are managed internally by the Application. Using an app's controllers config (as previously shown) loads all of the Controllers and instantiates them automatically.

尽管每一个控制器都是Ext.app.Controller的子类，但是每一个控制器都只会被加载它的Application实例化一次。在任何时候，每个控制器只会有一个实例，并且控制器实例的维护是由Application内部维护的。用app的controllers 配置（如前所示）会加载所有配置的控制器，并自动实例化他们。

A Simple Example

一个简单的例子

Here is how we might quickly define the Sessions controller we described previously. We are using two Controller configurations:

这里我们展示下如何快速定义前面所描述的Sessions控制器。我们用到了控制器的两种配置：

• refs
• 引用
• control
• 控制

Refs are an easy way to find Components on your page - in this case the Controller looks for all Components that match the formpanel xtype and assigns the first one found to the loginForm property. We subsequently use that property in the doLogin function.

引用是一个很方便找到页面上组件的方式，下面的例子中，控制器会查找所有xtype为formpanel的组件，并将找到的第一个与loginForm属性关联。我们随后会在doLogin方法里使用那个属性。

The second configuration is control. Similar to the ref's config, this uses a ComponentQuery selector to find all formpanel xtypes that contain a button (for example, this finds the Submit button in our hypothetical login form). Whenever a button of this type fires its tap event, our Controller's doLogin function is called:

第二个配置是control。与引用的配置类似，它用组件选择器查找xtype为formpanel并含有一个按钮的组件（例如，这个例子中找到的是login表单中的提交按钮）。无论何时这种类型的按钮触发了它的点击事件，控制器的doLogin方式就会被调用：

Ext.define('MyApp.controller.Sessions', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            loginForm: 'formpanel'
        },
        control: {
            'formpanel button': {
                tap: 'doLogin'
            }
        }
    },

    doLogin: function() {
        var form   = this.getLoginForm(),
            values = form.getValues();

        MyApp.authenticate(values);
    }
});

The doLogin function itself is straightforward. Because we defined a loginForm ref, the Controller automatically generates a getLoginForm function that returns the formpanel that it matches. Once we have that form reference, we pull out its values (username and password) and pass them to an authenticatefunction. That is mostly what a Controller does - listens for events that fire (usually by the UI) and initiate some action, in this case authenticating.

doLogin函数的功能很简单。由于我们定义了一个loginForm引用，控制器会自动生成getLoginForm方法，该方法会返回想匹配的formpanel。一旦我们拿到了该表单的引用，我们可以提取出表单中的值（用户名和密码），并将它们传递给authenticate函数。这通常就是控制器所做的事情 -- 监听ui触发的事件并触发相应的行动，在这个例子中是验证。

For more information on Controllers and their capabilities see the controllers guide.

关于控制器及其功能的更多信息请查看控制器向导。

Stores
数据存储

Stores are an important part of Sencha Touch and power most of the data-bound widgets. At its simplest, a Store is not much more than an array of Model instances. Data-bound Components such as List and DataView
render one item for each Model instance contained in the Store. As Model instances are added or removed from the Store, events fire, which the data-bound Components listen to and use to update themselves.

存储在st中是一个很重要的部分，它是很多数据绑定部件的数据源。最简单的情况下，存储只不过是模型实例的数组。数据绑定控件如列表、数据视图用存储中的每一个模型实例渲染一条记录。当模型实例从存储中增加或删时，数据绑定组件监听到相应的事件，并更新自己。

See the Stores guide for more information on Stores, how they fit with Components in your app, and specific integration points with your Application instance that you should be aware of.

产看Strore guide获取更多关于存储的信息，你应该关心下它们是如何填充组件及如何与Application实例整合的。

Device Profiles
设备配置

Sencha Touch operates across a wide range of devices with differing capabilities and screen sizes. A user interface that works well on a tablet may not work very well on a phone and vice versa, so it makes sense to provide customized views for different device types. However, we do not want to have to write our app multiple times just to provide a different UI, but we would like to share as much code as possible.

st工作在大量的具有不同性能、屏幕尺寸设备上。一个用户接口（ui）可能在平板上展现的很好但是在手机上就不一定很好，反之亦然，故为不同的设备定制不同的ui是很有必要的。然后，我们不能仅仅为了提供不同的ui而多次开发我们的应用，而是应该尽可能的重用代码。

Device Profiles are simple classes that enable you to define the different types of devices supported by your app and how they should be handled differently. They are optional, meaning you can develop your app without profiles at first and add them in later, or never use them at all. Each profile simply defines anisActive function that should return true if that profile should be active on the current device, plus a set of additional models, views, and controllers that load if that profile is detected.

设备配置使你能够为你的app设置支持的设备类型，并指定各自应该做何种处理。它们并不是必须的，也就是说你在开发的时候可以没有这些文件，但是你可以稍后添加进去，或者从来都没有用过它们。每一个设备配置文件定义了一个anisActive函数，如果该配置在当前设备上可用那么该函数应该返回true，并加载该配置定义的一些列模型、视图和控制器。

To add Profile support to your app, you need to tell your Application about the Profiles and create Ext.app.Profile subclasses for each, for example:

为了让你的app支持配置，你应该告诉Application这些配置信息，并为每一个概要创建一个Ext.app.Profile的子类，例如：

Ext.application({
    name: 'MyApp',
    profiles: ['Phone', 'Tablet']

    // as before
});

By defining the Phone and Tablet profiles, the Application loads the app/profile/Phone.js and app/profile/Tablet.js files. Let's assume that the tablet version of the app supports additional capabilities, for example managing groups. This example shows how you can define a Tablet profile:

通过定义手机和平板配置文件，Application会加载app/profile/Phone.js和app/profile/Tablet.js文件。假设平板设备的版本支持额外的一些功能，如管理组。下面的例子展示了你如何定义一个平板配置：

Ext.define('MyApp.profile.Tablet', {
    extend: 'Ext.app.Profile',

    config: {
        controllers: ['Groups'],
        views: ['GroupAdmin'],
        models: ['MyApp.model.Group']
    },

    isActive: function() {
        return Ext.os.is.Tablet;
    }
});

The isActive function returns true whenever the app runs on what Sencha Touch determines to be a tablet. This is a slightly subjective determination because there is a near-continuous spectrum of device shapes and sizes with no clear distinction between phones and tablets. Because there is no secure way to state which devices are tablets and which are phones, Sencha Touch's Ext.os.is.Tablet is set to true when running on an iPad and false otherwise. If you need more fine-grained control, it is easy to provide any implementation you like inside your isActive function, as long as it returns true or false.

当st发现当前应用运行在平板设备上时isActive返回true。这只是一个粗略的判断，因为有一系列设备在形状、尺寸上与手机、平板没有很明显的区别。由于没有一种很有把握的方法判断哪些设备是平板，哪些是手机，当运行于iPad时，st中的Ext.os.is.Tablet函数返回true，否则返回false。如果你需要更精确的控制，你可以实现你自己的isActive方法，只要它返回true或false就行。

You should ensure that only one of your Profiles returns true from its isActive function. If more than one profile returns true, only the first one is used and the rest are ignored. The first profile that returns true sets the Application's currentProfile, which you can query at any time.

你应该确保只有一个配置的isActive返回true。如果有多个返回true，只有第一个会被使用，其它的都会被忽略。第一个返回true的会被设置为Application的currentProfile，你可以在任何时候查询。

If the detected currentProfile defines additional models, views, controllers, and stores, these are automatically loaded by the Application, along with all of themodels, views and controllers defined on the Application itself. However, all of the dependencies named in the Profile are prepended with the Profile name, unless the fully-qualified class name is provided. For example:

如果检测到的currentProfile定义了额外的模型、视图、控制器及存储，这些会与Application自己定义的模型、视图、控制器一同被加载。然后，Profile中依赖的会被放置在该profile名下，除非提供全类名，例如：

• views: ['GroupAdmin'] loads app/view/tablet/GroupAdmin.js
• controllers: ['Groups'] loads app/controller/tablet/Groups.js
• models: ['MyApp.model.Group'] loads app/model/Group.js

Most of the time, a Profile only defines additional controllers and views, as the models and stores are typically shared between all variants of the app. For a more detailed discussion of Profiles see the device profiles guide.

大部分情况下，一个配置只定义额外的一些控制器和视图，模型和存储是所有变种的app中公用的。查看device profiles guide查看更多关于Profiles的说明。

Launch Process
启动处理

Each Application can define a launch function, which is called as soon as all of your app's classes have been loaded and the app is ready to launch. This is usually the best place to place any app startup logic, typically creating the main view structure for your app.

每一个Application都可以定义一个launch函数，该函数会在app的所有类被加载后、app准备启动时调用。这通常是放置app启动逻辑的最好位置，最典型的就是创建app的首页。

In addition to the Application launch function, there are two other places where you can place app startup logic. First, each Controller is able to define an initfunction, which is called before the Application launch function. Second, if you are using Device Profiles, each Profile can define a launch function, which is called after the Controller init functions, but before the Application launch function.

出了Application的launch函数，还有两个地方你可以放置app的启动逻辑。第一个，每一个控制器都可以定义一个init函数，该函数在Application的launch函数调用前调用。第二个，如果你在试用设备概要，每一个概要都可以定义一个launch函数，该函数在控制器的init方法调用之后，但是在Application的launch方法调用之前调用。

Note Only the active Profile has its launch function called - for example if you define profiles for Phone and Tablet and then launch the app on a tablet, only the Tablet Profile's launch function is called.

注意，只有活动的概要会调用它的launch方法，例如，你为手机和平板分别定义了概要文件，你在平板上运行程序，只有平板设备的概要文件中的launch方法会被调用。

The launch order is:

启动顺序是：

1. Controller#init functions called    控制器的init方法被调用
2. Profile#launch function called    配置的launch方法被调用
3. Application#launch function called   Application的launch方法被调用
4. Controller#launch functions called    控制器的launch方法被调用

When using Profiles, it is common to place most of the bootup logic inside the Profile launch function, because each Profile has a different set of views that need to be constructed at startup.

当使用配置时，通常将启动逻辑放在配置的launch方法中，因为每一个配置在启动的时候都有不同的视图需要构建。

Routing and History Support
路由和历史的支持

Sencha Touch has full Routing and History support. Several of the SDK examples, including the Kitchen Sink application, use history support to enable the back button for easily navigating between screens. This is especially useful on Android devices.

st有强大的路由和历史记录支持。sdk的几个例子，包括Kitchen Sink，使用了历史记录支持，使得能够用返回按钮来导航各个页面。这在安卓设备上特别有用。

Further Reading
提升阅读

The following guides provide additional information on using the Sencha Touch application architecture:

下面的想到提供了使用st结构的额外信息：

• Controllers   （第六天）
• Device Profiles   （第七天）

最近事蛮多，每天回去吃个饭、散散步，跟媳妇打个电话，锻炼下，洗刷下，就到11点了，经常性的翻译不完，只能第二天在补上了！

加油，向st进军！