Sencha 包(Package)

原文链接：https://blog.csdn.net/lovelyelfpop/article/details/78701871

在 ExtJS 应用程序中，可以使用包(package)。Package 的优点(主题也是一种 package)，它可以很容易地在不同的应用程序之间共享代码。增加了组件复用的可能性。

例如，您在 grid 顶部有自己设计的搜索工具栏。那么把这个工具栏放到你自己的 package 中就是一个不错的选择。这样，直接把 package 添加到应用程序中，就可以使用这些组件了，而不需要再你的项目结构中复制、修改代码。

在这篇文章中，我将向你展示如何在 package 中实现本地化（i18n）一个组件。要注意，我们需要使用 Sencha CMD。

用”common”目录来共享代码和 package 的区别

在不同的应用程序之间共享代码，有很多方式。你可以把代码放到一个common目录下，但是更好的方式，是使用 package。

在一个 package 中，我们共享了在大多数应用程序中都使用到的组件。我们有一个 package 名叫Factory。名字你可以任意取，你甚至可以有多个 package。

common 目录 还是 package

决定何时使用common文件夹进行共享，何时使用 package，完全取决于你自己。我们只对那些完全独立于应用程序特定功能的东西使用Factory包。我们希望保持 package 的轻量，避免里面出现很多在应用程序中使用不到的代码。在我们的 package 中，我们有一些单例类(singleton, 类似其他语言的静态类)，一些 grid 和 formPanel 的通用工具栏。package 里面也有一些 overrides(重写/覆盖)。

利用 overrides 来实现本地化一个表单控件

我们将向您展示如何通过使用 overrides(重写) Ext.form.field.VTypes 类来管理我们 package 中的本地化。

正如我所说的我们的 package 被称为Factory。这个 package 已经在我们的 workspace(工作空间)的 packages 目录下，使用以下命令创建出来了：

sencha generate package Factory

这样，它会在你 packages/local 文件夹中创建 Factory 文件夹。这个 package 已经可以使用了。

我将在这里跳过一些步骤，向您展示与本示例相关Factory 这个 package 的目录结构

Factory
- locale
- overrides
- src

本地化

首先要注意的是在创建 package 时，locale文件夹是没有的。所以你必须手动创建这个文件夹。在这个文件夹中，创建一些你想要支持的语言的文件夹，如：

locale
- de
-- form
--- field
---- VTypes.js
- nl
-- form
--- field
---- VTypes.js

正如你所看到的，它遵循与 SASS 样式或其他 overrides 使用相同的目录结构。

de即德语 VTypes.js 中的源代码如下所示：

Ext.define('Factory.de.form.field.VTypes', {
    override: 'Ext.form.field.VTypes',
    urlOnlyText: 'Soll eine gültigen Webseiten URL sein'
});

正如你所看到的，locale本身不在 Ext.define 的路径中，这是对的（下面会解释）。

对原类的 override

在我们 package 的 overrides 文件夹中，我们有：

- overrides
-- form
--- field
---- VTypes.js

在这个 VTypes.js 中，我们有以下代码：

Ext.define('Factory.overrides.form.field.VTypes', {
    override: 'Ext.form.field.VTypes',
    urlOnly: function (v) {
        return /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/.test(v);
    },
    urlOnlyText: 'Must be a valid web URL'
});

正如你所看到的 Ext.define 的类名中有个override。最重要的是要注意，locale文件夹中的 override 重写的不是Factory.overrides.form.field.VTypes，而是Ext.form.field.VTypes。如果你不这样做，将会导致错误：Cannot read property '$isClass' of undefined。

Package.json

我们需要对我们的 Factory 包的 package.json 做一些小的修改:

"overrides": "${package.dir}/overrides,${package.dir}/${toolkit.name}/overrides,${package.dir}/locale/${package.locale}",

我们把${package.dir}/locale/${package.locale}放在 overrides 键值的末尾。我从 Ext JS 自带的 ext-locale 包中知晓了这个。不要问我为什么有效，但它的确有效。

如何在您的应用程序中使用该 package

要在您的应用程序中使用该 package，您必须修改应用程序根文件夹中的 app.json 文件。您必须按以下方式修改 requires 属性:

"requires": [
    "font-awesome",
    "jarvus-hotfixes",
    "Factory" // 这里
],

或者根据所使用的具体的 toolkit 修改 requires 属性:

"classic": {
    "js": [
      {
        "path": "${framework.dir}/build/ext-all-rtl-debug.js"
      }
    ],
    "requires": [
      "ext-locale",
      "Factory" //这里
    ],
    "locale": "de"
},

下一步：使用 Sencha CMD

上一步修改完成之后，继续在应用程序文件夹下，使用 Sencha CMD 执行以下命令：

• sencha app refresh
• 如果继续开发，执行 sencha app watch
• 如果要 build(构建)，执行 sencha app build

它看起来怎么样？

重用 Ext JS 包

要在其他应用程序中使用您的 package，您可以简单地复制 packages/local/Factory 文件夹到其他 应用程序/workspace 的 packages/local 文件夹中。修改 app.json 中的 requires 并执行 sencha app refresh 之后，其他应用程序也能使用了。

为了保证 共用了同一个 package 的多个应用程序的一致性，您应该考虑使用远程 package，这样，package 的一处修改，就会同步到任何一个使用了该 package 的应用程序中。
怎么做？我会在下一篇文章中介绍。

参考：

Sencha Cmd Packages

翻译自

https://www.enovision.net/localizing-your-ext-js-packages/