为多种环境和屏幕开发

在所有设备上生成功能性、可用且美观的应用程序是应用程序开发的圣杯。借助 Ext JS 6，您现在拥有实现此目标所需的工具，而且难度极小。

可以通过几种不同的方式完成创建满足所有这些要求的应用程序。

通用应用程序和工具包

自 Ext JS 6 以来最大的变化之一是将 Ext JS 和 Touch 合并为一个包含两个不同工具包的单一框架：classic 和 modern。这些工具包包含来自 Ext JS 和 Touch 的视图层。共享核心资源和逻辑并利用这两个工具包的应用程序称为通用应用程序。

要选择应用程序的工具包，用户只需调整 Sencha Cmd 生成的应用程序的 app.json，如下所示

"toolkit": "classic", // or "modern"

两个框架的核心（数据、控制器、模型等）已协调到一个单一的通用平台中。这允许共享数据和逻辑，这可以帮助开发人员进一步优化他们的应用程序。

注意：我们将在下面更详细地讨论每个工具包。

如果您不熟悉 app.json，它是一个配置列表，是您的应用程序的核心。

Sencha Cmd 生成的 app.json 文件包含许多您可能想要调整的属性。这些属性以内联方式记录，以解释它们各自控制的内容。

如果您正在升级项目，则您的 app.json 可能不包含所有可能的选项。执行升级后，任何缺失属性的默认值都可以在 “.sencha/app/app.defaults.json” 中找到。您不应编辑该文件，但可以从中复制片段到您的 app.json 文件中。

有关 app.json 的更多信息，请查看 微型加载器指南。

Classic

classic 工具包提供传统的 Ext JS 5 应用程序支持。这包括对桌面浏览器、平板电脑和启用触摸屏的笔记本电脑的支持。

Modern

modern 工具包为所有现代浏览器 (IE11+) 提供从桌面到手机的通用 HTML5 应用程序支持。

构建配置文件

构建配置文件允许开发人员根据应用程序的 app.json 文件中找到的 builds 对象创建应用程序的变体。从历史上看，用户有机会根据主题和语言环境区分构建。

我们在上面讨论了更多关于 app.json 的内容，但有关更多信息，请查看 微型加载器指南。

从 Ext JS 6 和 Sencha Cmd 6 开始，开发人员现在可以在他们的构建配置中包含 toolkit 键。这允许用户将工具包设置为 classic 或 modern（更多内容见下文）。然后 Cmd 循环遍历每个构建键，并为每个构建应用适当的工具包和任何工具包无关的逻辑。

工具包无关代码包括可以在工具包之间共享的任何内容。这包括以前在 sencha-core 包中找到的任何内容（即，数据、控制器等）。
重要的是要注意，这种共享逻辑必须可供两个工具包使用。

通用应用程序的 builds 配置应类似于以下 JSON 结构

"builds": {

   "mymodern": {

       "toolkit" : "modern",

       "theme"   : "theme-cupertino",

       "requires": [

           "charts",

           "ux"

       ]   

   },

   "myclassic": {

      "toolkit" : "classic",

      "theme"   : "theme-neptune",

         "slicer"  : null,

      "requires": [

           "charts"

       ]     

   }

}

构建时预期

让我们讨论一下您基于上面的 builds 对象所期望的结果。此 builds 配置允许您从 Sencha Cmd 发出以下构建命令

// Build modern application only
sencha app build mymodern

// Build classic application only
sencha app build myclassic 

// Build all targets within the builds object
sencha app build 

重要的是要注意，构建目标名称可以是您选择的任何名称。您可以将 mymodern 替换为 foo，然后发出

sencha app build foo

生成的 mymodern 应用程序将使用 modern 工具包，有权访问 ux 和 charts 包，并显示 Cupertino 主题。

生成的 myclassic 应用程序将使用 classic 工具包，有权访问 charts 包，并显示 Neptune 主题。

您可以在 builds 对象中创建任意数量的变体。默认情况下，所有输出都将显示在您的根级别 builds 文件夹中。

通用应用程序

通用应用程序利用 Sencha Cmd 生成跨越两个工具包的多个应用程序构建。这些构建产生可以在桌面或移动设备上运行的应用程序。重要的是要注意，单个应用程序不能在单个类路径中包含 modern 和 classic 框架。在大多数情况下，应用程序将在传统的应用程序目录中包含全局逻辑；根级别的“app”文件夹。
理想情况下，您的应用程序的通用方面将包含数据、模型、viewmodel 等。您也可以共享控制器，但是，开发人员可能需要发挥创造力才能生成可以跨越工具包的逻辑。

例如，假设您的 classic 应用程序有一个网格，而您的 modern 应用程序有一个列表，并且它们都使用共享存储和模型。然后，假设您希望两个应用程序都对用户与这些组件的交互做出反应。我们必须寻找网格和列表之间的常见事件。理想的解决方案可能是使用 select 事件，因为这两个组件都能够触发它。但是，如果您的逻辑包含“itemtap”，您的 classic 应用程序将不知道这意味着什么，并且很可能会在 Cmd 构建过程的 classic 部分引起问题。

在考虑共享逻辑和资源之后，开发人员可以在相应的工具包 src 文件夹中创建特定于工具包的代码。通过查看 Ext JS 6 中的新通用应用程序文件夹结构，可以最好地理解这一点。

注意： 如果您正在创建单个工具包应用程序，则文件夹结构应与过去的实现非常相似。

Ext JS 6 文件夹结构

重要的是要注意在创建通用应用程序时 Ext JS 6 和 Sencha Cmd 6 的新目录结构中的一些显着差异。进行这些更改是为了确保应用程序能够针对三个特定领域

• 全局应用程序代码

• Classic 特定代码

• Modern 特定代码

这是通用应用程序文件夹结构的表示

// app

     // app

          // model

          // store    

          // view

     // classic

          // src

          // sass

          // resources

     // modern

          // src

          // sass

          // resources

     // resources

     // sass

创建通用应用程序

开始使用通用应用程序很简单。Sencha Cmd 现在生成一个“starter app”，其中包含适当的文件结构、app.json 和共享代码示例。要创建您的通用应用程序，请像往常一样生成一个应用程序

 sencha -sdk /path/to/ExtSDK generate app MyApp ./MyAppLocation

Sencha Cmd 现在将创建一个功能齐全的通用应用程序。此应用程序将生成一个 classic 和 modern 应用程序，它们都共享可以在“app”文件夹中找到的数据。特定于工具包的定义可以在它们各自的工具包命名文件夹（modern 和 classic）中找到。

为了查看每个应用程序以进行开发，您可以像定位构建一样定位您的 sencha app watch。

 sencha app watch modern 

 sencha app watch classic

注意： 省略 watch 目标将默认为 builds 对象中第一个命名的构建。

构建应用程序后，您可以在各自的浏览器中查看构建。
例如，在 iPhone 上加载 build 文件夹应向您显示您的应用程序的 modern 版本。在桌面浏览器中加载它应该向您显示您的应用程序的 classic 版本。

运行时配置

还有几种方法可以使用应用程序的运行时环境来创建应用程序。这些方法包括 app profile、响应式配置和平台配置。

让我们探讨它们各自呈现的可能性以及它们如何协同工作，为您的用户在多种媒体上提供无缝体验。

App 配置文件

使用 Ext.app.Profile 允许开发人员根据通过 mainView（或 Viewport）定义的标准来交换应用程序的视图。这意味着您可以通过为特定条件激活配置文件来为您的应用程序创建完全不同的视图。例如，您可能希望根据您的应用程序是在移动设备上还是在桌面浏览器上加载来呈现特定的视图。

在这种情况下，您将创建两个配置文件，然后将它们列在 Application 类中找到的 profiles 数组中。这是一个简单的设置示例

Ext.define('App.Application', {
    extend: 'Ext.app.Application',

    profiles: [
        'Desktop',
        'Mobile'
    ]
});

活动配置文件由您的配置文件上的 isActive 方法的返回值确定。这是一个示例，说明如何配置应用程序以根据检测到的操作系统加载桌面视图。

Ext.define('App.profile.Desktop', {
    extend: 'Ext.app.Profile',

    mainView: 'App.view.desktop.Main',

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

    launch: function () {
        console.log('Launch Desktop');
    }
});

配置文件不必使用 mainView 配置。相反，您可以将配置文件的 launch 方法用于任何进一步的自定义处理。只会调用活动配置文件的 launch 方法。

平台配置

platformConfig 属性可以在类声明中使用，也可以用于根据当前平台或设备分类配置对象实例。我们可以在视图中这样使用它

Ext.define('App.view.summary.Manufacturing', {
    extend: 'Ext.panel.Panel',

    title: 'Mfg Summary',

    platformConfig: {
        desktop: {
            title: 'Manufacturing Summary'
        }
    }
});

以上与下面的直接方法具有相同的结果

Ext.define('App.view.summary.Manufacturing', {
    extend: 'Ext.panel.Panel',

    title: testForDesktop ? 'Manufacturing Summary'
                          : 'Mfg Summary'
});

这个想法不是比较 platformConfig 与三元运算符的优点，而是要看到 platformConfig 被视为类声明的一部分。因此，无论基类如何，此方法都有效。优于内联逻辑而首选 platformConfig 的一个原因是保持视图仅为数据，这样可以安全地以 JSON 格式发送。

也可以使用 platformConfig 来配置实例

Ext.define('App.view.summary.Manufacturing', {
    extend: 'Ext.panel.Panel',

    items: [{
        xtype: 'panel',

        platformConfig: {
            desktop: {
                title: 'Manufacturing Summary'
            },
            '!desktop': {
                title: 'Mfg Summary'
            }
        }
    }]
});

上面最直接的翻译是

Ext.define('App.view.summary.Manufacturing', {
    extend: 'Ext.panel.Panel',

    items: [
        Ext.merge({
            xtype: 'panel'
        },
        testForDesktop ? {
            title: 'Manufacturing Summary'
        } : {
            title: 'Mfg Summary'
        })
    ]
});

但是，在这种 platformConfig 的使用中，合并由 initConfig 方法处理。换句话说，仅当类在其构造函数中调用 initConfig 时，才支持将 platformConfig 属性作为实例配置提供。Ext.Widget、Ext.Component、大多数数据包类（例如 AbstractStore）以及任何使用 Observable 的类都是这种情况。

类似于在类声明中使用 platformConfig 修改类主体的方式，在实例配置上使用 platformConfig 修改对象的初始配置。

响应式配置

Ext JS 5.0 引入了 responsiveConfig 以及启用它的 Responsive Mixin 和插件。responsiveConfig 的规则和属性不仅在创建实例时进行评估，而且在设备方向或视口大小更改时也会进行评估。虽然与 platformConfig 相比，这增加了一些开销，但它可能比您自己通过监听窗口大小调整或方向更改来处理这些开销更有效。

如果我们稍微调整一下我们的标准，我们可以使标题响应设备大小而不是设备分类（“桌面”）。

Ext.define('App.view.summary.Manufacturing', {
    extend: 'Ext.panel.Panel',
    mixins: ['Ext.mixin.Responsive'],

    responsiveConfig: {
        'width >= 600': {
            title: 'Manufacturing Summary'
        },
        'width < 600': {
            title: 'Mfg Summary'
        }
    }
});

由于上面的类具有 responsiveConfig，因此我们受益于在此处使用 mixin，并避免为每个实例创建插件。但是，当在组件实例上使用时，我们必须改用响应式插件

Ext.define('App.view.summary.Manufacturing', {
    extend: 'Ext.panel.Panel',

    items: [{
        xtype: 'panel',
        plugins: 'responsive',

        responsiveConfig: {
            'width >= 600': {
                title: 'Manufacturing Summary'
            },
            'width < 600': {
                title: 'Mfg Summary'
            }
        }
    }]
});

重要的是要记住，上面示例中的宽度是视口宽度，而不是组件宽度。

结论

有了所有这些工具，现在只需为特定情况选择合适的工具即可。对于加载时的简单调整，可以使用 platformConfig。对于更动态的条件，可以使用 responsiveConfig。要大规模更改内容，可以使用 Ext.app.Profile。

如果您需要一个在平板电脑上看起来与在台式机甚至手机上完全不同的应用程序，您可以考虑 Sencha Cmd 构建配置文件。构建配置文件可以从桌面构建中删除平板电脑开销，反之亦然。

由于不可能有“一刀切”的解决方案，Ext JS 提供了不同的工具，这些工具结合了效率和灵活性。它们协同工作，以帮助确保您的应用程序自然适合最广泛的设备范围。