Sencha-Device Profiles （设备配置文件）

今天的移动Web应用程序应该工作在各种各样的设备，包括从最小的手机最大的片。这些设备有一个宽的范围内的屏幕分辨率，并以不同的方式使用。人们倾向于使用手机应用程序，出了家门，迅速收集一些信息或执行一些操作 - 通常在一分钟之内。平板的应用程序是更可能被用于较长的时间，通常在家庭或别的地方，他们可以坐下很长一段时间。

所有这一切意味着，人们期望不同的应用经验，在不同的设备上。然而，大部分的应用程序逻辑和资产之间可以共享这些不同的经验。为每个平台编写独立的应用程序非常耗时，容易出错，而且只是平淡乏味。值得庆幸的是，设备配置文件给我们一个简单的方式来分享，因为我们需要很容易地定制行为，外观和工作流程，为每个设备之间的设备类型，而只是尽可能多的代码。

设置配置文件

设备配置文件范围内的应用程序，例如，如果我们想创建一个电子邮件与手机和平板电脑应用程序的配置文件，我们可以定义我们的app.js是这样的（如果这是不熟悉的应用程序指南的介绍）：

Ext.application({    name:'Mail',    profiles:['Phone','Tablet']});

我们没有给我们的应用发射功能，所以目前它要做的是加载这两个配置文件。按照惯例，它希望找到这些在应用程序/配置文件/ Phone.js的和应用程序/资料/ Tablet.js的。下面是我们的电话配置文件可能看起来像：

Ext.define('Mail.profile.Phone',{    extend:'Ext.app.Profile',    config:{        name:'Phone',        views:['Main']},    isActive:function(){returnExt.os.is.Phone;}});

平板配置文件遵循相同的模式。在我们的手机主页，我们只有真正提供三条信息-配置文件名 ​​，可选的加载 ​​此配置文件被激活的额外意见，和一个isActive功能。

该的isActive功能是确定一个给定的配置文件应该是设备上的恰好是启动您的应用程序。目前最常用的分割是为手机和平板电脑创建配置文件，使用内置的的Ext.os.is.Phone和Ext.os.is.Tablet性能。你可以写你喜欢的isActive的功能，只要它总是返回真或假的设备上运行任何代码。

确定活动的配置文件

一旦配置文件被加载，isActive功能依次调用。第一个返回true的个人资料，应用程序将启动。此档案中应用程序的currentProfile，和应用程序准备载入其所有相关-模型，视图，控制器和其他类构成的应用程序。这是通过结合自己的与积极配置文件中所指定的依赖关系。

例如，我们修改我们的应用程序，以便它加载一些它自己的模型和视图：

Ext.application({    name:'Mail',    profiles:['Phone','Tablet'],    models:['User'],    views:['Navigation','Login']});

现在，当我们在手机上加载的应用程序，手机主页被激活，应用程序将加载以下文件：

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

前三个项目中指定的应用程序-用户模式加上导航和登录意见。第四个项目是指定的手机主页，并遵循一种特殊形式。按照惯例，预计到配置文件中的特定类被定义在一个子目录的名称相同的个人资料。例如，在手机主页中的“主”指定的视图将被加载的应用程序/视图/ 电话 / Main.js的，而如果我们定义的“主”，在“应用程序将加载应用程序/视图/ Main.js的。

这同样适用于所有的加载配置文件中的模型，视图，控制器和存储。这是很重要的，因为它使我们能够轻松共享行为，查看配置文件之间的逻辑和（看专业的视图和控制器部分）。如果你需要加载的类不符合本公约时，可以指定完整的类名，而不是：

Ext.define('Mail.profile.Phone',{    extend:'Ext.app.Profile',    config:{        name:'Phone',        views:['Main','Mail.view.SpecialView'],        models:['Mail.model.Message']},    isActive:function(){returnExt.os.is.Phone;}});

正如我们在上面看到的，你可以混合和匹配完全合格的类名（例如“Mail.view.SomeView' ）和相对指定的类的名称（例如，“主”，这成为“Mail.view.phone.Main）。要知道，所有的模型，视图，控制器和存储配置文件指定用这种方法处理。这意味着，如果有模型或商店，你要加载只适用于平板电脑，但不想类，如Mail.model.tablet.User的，你应该指定完全合格的类名，而不是（例如Mail.model.User这种情况下）。

启动过程

启动过程中使用配置文件几乎是完全一样的，因为它是没有配置文件。基于配置文件的应用程序有一个3级的发射过程后，所有的依赖都被装入后，会发生以下情况：

1. 控制器实例，每个控制器的初始化函数被调用
2. 配置文件的启动函数被调用
3. 应用程序的启动函数被调用。

当使用配置文件使用配置文件启动的功能来创建应用程序的初始UI是很常见的。在许多情况下，这意味着应用程序的启动函数被彻底去除的初始UI通常是不同的，每个配置文件中（当然还可以指定一个应用程序范围内发射功能设立的东西，如分析或其他无关的个人资料设置）。

一个典型的配置文件启动功能可能看起来像这样：

Ext.define('Mail.profile.Phone',{    extend:'Ext.app.Profile',    config:{        name:'Phone',        views:['Main']},    isActive:function(){returnExt.os.is.Phone;},    launch:function(){Ext.create('Mail.view.phone.Main');}});

请注意，配置文件和应用程序启动功能是可选的 - 如果你没有定义他们，他们就不会被调用。

专业次数

大多数的专业化配置文件中的发生的观点和控制器。让我们来看看第一的意见。假设我们有一台平板配置文件看起来像这样：

Ext.define('Mail.profile.Tablet',{    extend:'Ext.app.Profile',    config:{        views:['Main']},    launch:function(){Ext.create('Mail.view.tablet.Main');}});

当我们启动这个应用程序的平板设备上，像往常一样，将被载入文件的应用程序/意见/片/ Main.js的的。下面是我们在我们的应用程序/视图/片/ Main.js文件的：

Ext.define('Mail.view.tablet.Main',{    extend:'Mail.view.Main',    config:{        title:'Tablet-specific version'}});

通常，当我们定义一个视图类，我们延长煎茶触摸内置的观点，但在这种情况下，我们正在扩展Mail.view.Main的 - 我们自己的看法。下面是如何上看起来：

Ext.define('Mail.view.Main',{    extend:'Ext.Panel',    config:{        title:'Generic version',        html:'This is the main screen'}});

因此，我们有一个超类（Mail.view.Main）和一个配置文件的具体子类（Mail.view.tablet.Main），可以自定义任何方面的超类。在这种情况下，我们正在改变主视图的标题从“通用版”，“平板电脑专用版本”在我们的子类，所以，当我们的应用程序启动，我们将看到。

因为这些都只是正常的课程，它很容易定制的几乎任何部分使用的灵活配置系统的超类。例如，让我们说，我们也有一个手机版的应用程序-我们可以自定义版本的主要观点是这样的（应用程序/视图/电话/ Main.js）：

Ext.define('Mail.view.phone.Main',{    extend:'Mail.view.Main',    config:{        title:'Phone-specific version',        items:[{                xtype:'button',                text:'This is a phone...'}]}});

共享子视图

虽然是有用的，但更常见的是分享一些意见和它们拼接在一起以不同的方式为不同的配置文件。例如，假设一个电子邮件应用程序在平板电脑的用户界面是一个分屏显示一个消息列表的左侧和右侧装上的消息。手机版本是完全一样的邮件列表和类似的信息视图，但在卡片布局，因为这个时间是不足够的屏幕空间，同时看到他们两个人。

要做到这一点，我们就开始创建两个共享的子视图 - 邮件列表和消息查看器。在每一种情况下，我们已经离开了班级配置简洁：

Ext.define('Mail.view.MessageList',{    extend:'Ext.List',    xtype:'messagelist'// config goes here...});

消息查看器：

Ext.define('Mail.view.MessageViewer',{    extend:'Ext.Panel',    xtype:'messageviewer'// config goes here...});

现在，为了实现我们的目标布局平板电脑的主要观点可能会做这样的事情：

Ext.define('Mail.view.tablet.Main',{    extend:'Ext.Container',    config:{        layout:'fit',        items:[{                xtype:'messagelist',                width:200,                docked:'left'},{                xtype:'messageviewer'}]}});

这将创建一个200像素宽的留言列表在左边，其余的设备的屏幕空间来显示消息查看器。现在，让我们说，我们要实现我们的电话布局：

Ext.define('Mail.view.phone.Main',{    extend:'Ext.Container',    config:{        layout:'card',        items:[{                xtype:'messagelist'},{                xtype:'messageviewer'}]}});

在这种情况下，我们只是使用一个卡片布局的容器内（一次只显示一个项目的布局），并把它的列表和观众。我们会告诉集装箱，显示messageviewer时，消息列表中的拍了拍一些逻辑，在需要插入，但我们很容易重复使用我们的两个子视图被加载配置文件，根据不同的配置。

像以前一样，我们也可以选择为每个配置文件自定义两个共同的看法-例如，我们可以创建Mail.view.phone.MessageViewer和Mail.view.tablet.MessageViewer子类，这两个扩展Mail.view.MessageViewer超类。这使我们能够再次分享了很多，同时提出这些类之间的自定义适当的设备的用户碰巧使用的视图代码。

专业控制器

就像与次数有很多，很多应用程序可以共享多个配置文件之间的逻辑控制器。这里最大的不同配置文件之间通常与工作流相关的。例如，一个应用程序的平板电脑的个人资料可能会允许你在一个页面上，而完成工作流的电话机配置文件提出了一个多页的向导。

在这里，我们有一个简单的电话配置文件，加载一个叫做主控制器称为消息。像以前一样，这将加载应用程序/视图/电话/ Main.js的的应用程序/控制器/电话/ Messages.js的：

Ext.define('Mail.profile.Phone',{    extend:'Ext.app.Profile',    config:{        views:['Main'],        controllers:['Messages']},    launch:function(){Ext.create('Mail.view.phone.Main');}});

现在，我们知道，我们的手机和平板电脑专用的控制器，分享他们的大部分功能由创建一个控制器超类的应用程序/控制器/ Messages.js的所以我们开始：

Ext.define('Mail.controller.Messages',{    extend:'Ext.app.Controller',    config:{        refs:{            viewer:'messageviewer',            messageList:'messagelist'},        control:{            messageList:{                itemtap:'loadMessage'}}},    loadMessage:function(item){this.getViewer().load(item);}});

此控制器做了三件事情：

1. 设置的意见，我们关心的文献。
2. 侦听信息列表上的itemtap事件，并调用loadMessage（）函数被解雇itemtap时，。
3. 选定的信息项目加载到浏览器时loadMessage（）被称为

现在，我们有这个，可以很容易地创建我们的电话特定的控制器：

Ext.define('Mail.controller.phone.Messages',{    extend:'Mail.controller.Messages',    config:{        refs:{            main:'#mainPanel'}},    loadMessage:function(item){this.callParent(arguments);this.getMain().setActiveItem(1);}});

在这里，我们的邮件扩展超类控制器，并提供两种功能：

1. 我们的手机用户界面的主面板中添加其他文献
2. 我们延长loadMessage的功能来执行原来的逻辑，然后设置主面板的活动项目的消息查看器。

所有的配置，这是在超类中继承的子类。在的情况下的复制的configs，如文献，配置合并，使手机短信控制器类有3个文献-主，浏览器和留言列表。正如任何其他扩展另一个类，我们可以使用callParent在超类扩展现有的功能。

请记住，我们的Mail.controller.Messages父类没有被声明为一个由应用程序或配置文件的依赖。它自动加载，因为我们Mail.controller.phone.Messages控制器扩展它。

什么，分享什么。

在上面的例子中，我们能够分享一些（但不是全部）的文献。我们也可以共享同一个事件，我们听与控制器的控制配置。一般来说，应用程序配置文件之间，更少的文献和控制的configs发散，您将能够分享。

一个控制器的配置应该共享的配置文件是路线。这些URL映射到控制器操作，并允许后退按钮的支持和深层链接。在超类中，重要的是要保持的路由，因为相同的URL映射到相同的内容，而不管该设备。

例如，如果您的朋友使用您的应用程序的手机版，并给您一个链接到的页面，她是目前在你的应用程序，你应该能够利用您的平板电脑设备上的链接，看到的平板电脑专用视图该网址。在超类中保存的所有路由，可以让你保持一致的URL结构，将工作无论设备。

专业模型

模型进行自定义每个配置文件的频率比控制器和视图，因此通常不需要一个子类。在这种情况下，我们只需指定类的完全限定名称型号：

Ext.define('Mail.profile.Tablet',{    extend:'Ext.app.Profile',    config:{        models:['Mail.model.Group']}});