Sencha 包(Pacakge)

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

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

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

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

在不同的应用程序之间共享代码，有很多方式。你可以把代码放到一个

common

目录下，但是更好的方式，是使用 pacakge。

在一个 pacakge 中，我们共享了在大多数应用程序中都使用到的组件。我们有一个 pacakge 名叫

Factory

。名字你可以任意取，你甚至可以有多个 pacakge。

common 目录 还是 pacakge

决定何时使用

common

文件夹进行共享，何时使用 pacakge，完全取决于你自己。我们只对那些完全独立于应用程序特定功能的东西使用

Factory

包。我们希望保持 pacakge 的轻量，避免里面出现很多在应用程序中使用不到的代码。在我们的 pacakge 中，我们有一些单例类(singleton, 类似其他语言的静态类)，一些 grid 和 formPanel 的通用工具栏。pacakge 里面也有一些 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/