Sencha Touch 2 快速入门系列（九） -- 配置（Profile）

本文已添加至Sencha Touch 2快速入门系列索引：http://blog.csdn.net/ardy_c/article/details/7544470

转载请注明出处：http://blog.csdn.net/ardy_c/article/details/8543597

设备配置(Device Profile)

现在是移动web应用将要工作于大量不同的设备中，小至手机，大至平板电脑。而用户希望在不同的设备上能得到不同的体验。尽管如此，你写的大部分应用逻辑和资源都是可以共享使用的。为不同的平台写app，既容易出错，也让人感到烦恼。非常感谢地，Device Profiles给我们提供了一种方式，让我们可以在不同种类的设备之间，尽可能多地共享我们写的代码，并且很容易地根据不同的设备进行行为、外观和工作流的自定义。

建立配置(Setting up Profile)

Device Profiles存在于一个应用的环境之中(context)。例如，如果我们想创建一个email应用为手机及平板使用，我们可以定义我们的app.js，如下

Ext.application({
    name: 'Mail',

    profiles: ['Phone', 'Tablet']
});

我们在上面的代码没有为应用定义一个启动的函数，因此，在（启动）那个时候它将会加载那两个配置。按照惯例，程序希望找到以下两个文件 app/profile/Phone.js 和 app/profile/Tablet.js 。下面是我们的适用于手机的配置文件：

Ext.define('Mail.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Phone',
        views: ['Main']
    },

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

适用于平板的配置文件也是跟随相同的模式。在我们的手机配置文件里，我们只提供了三项信息：配置文件名，当这个配置被激活时将被加载的view集，和一个isActive函数。

isActive函数的作用是决定当什么设备访问时可以激活这项配置。目前，最大的分割点就是为手机和平板创建配置(profiles)，使用集成的 Ext.os.is.iPhone 和 Ext.os.is.Tablet 属性。你可以在isActive函数里面写任何你喜欢的代码，只要当设备运行时它总是返回 true 或 false 即可。

决定激活的配置(Determining the Active Profile)

一但配置文件被加载，它们的isActive函数就会被依次调用。第一个返回true的配置将为被Application用作启动配置。这个配置也会被Application设定为当前的配置，并且Application准备加载这个配置里的所有指定的依赖：数据模型(models)， 视图(views)，控制器(Controllers)和构成这个app的其它类。

例如，让我们修改一下我们的Application，让它能够加载它自己的一些 Models 和 Views：

Ext.application({
    name: 'Mail',

    profiles: ['Phone', 'Tablet'],

    models: ['User'],
    views: ['Navigation', 'Login']
});

当我们在手机是加载这个app 时，Phone配置将会被激活，并且Application将会加载以下文件：

• app/model/User.js
• app/view/Navigation.js
• app/view/Login.js
• app/view/phone/Main.js

前面三项是被指向于Application它自己的内部：User model，加上Navigation和Login views。第四项是被Phone配置指定，并遵循一种特殊形式。按照惯例，指定在配置里面的classes是希望被定义在以配置名称为名的子文件夹里。例如，在配置里指定的Main view将会在 app/view/phone/Main.js 被加载。反之，如果我们定义了Main在Application里，它将会在 app/view/Main.js 被加载。

这同样适用于所有的模型(Models)、视图(Views)、控制器(Controllers)和存储(Stores)在一个配置(Profile)中加载。这是非常重要的，它让我们可以很容易地在不同的配置中共享行为、视图逻辑及其它资源。如果你需要加载的类不适合这种约定的要求，你可以指定类的全称来代替：

Ext.define('Mail.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Phone',
        views: ['Main', 'Mail.view.SpecialView'],
        models: ['Mail.model.Message']
    },

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

正如上所见，你可以同时使用类的全名(例如：Mail.view.SomeView)进行匹配，以及使用相对路径的类名进行指定。所有定义在配置(Profile)里面的模型(Models)、视图(Views)、控制器(Controllers)和存储(Stores)都可以获得同样的代遇。这就意味着，如果你只想为平板加载多个模型(Models)或存储(Stores)，但又不想加载如 Mail.model.tablet.User 这种相对路径的类，那你就必须通过使用类的全名来代替了(例如：Mail.model.User)。

启动过程(The Launch Process)

使用配置的启动过程几乎和不使用的情况一样。基于配置(Profile)的应用有三个阶段的启动过程。当全部依赖加载完成后，下面的事情就会发生：

1. 控制器被实例化，每一个控制器的 init 函数被调用；

2. 配置(Profile)的 launch 函数被调用；

3. Application 的launch 函数被调用。

当使用配置时，使用配置的launch函数去创建应用的初始化UI是常见的。在很多情况下，这意味着Application的launch函数几乎等于被移除了，因为在不同的配置中初始化的UI通常是不一样的(你依然可以使用Application范围的launch函数去做一些设备工作，例如分析或者配置无法预知的设置工作)。

一个典型的配置的launch函数应该像这样：

 

Ext.define('Mail.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Phone',
        views: ['Main']
    },

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

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

p.s. Profile 和 Application的launch函数都是可选的，如果你没有定义它们，它们就不会被调用。