ExtJS MVC,动态加载和i18n

Question

我想用不同的语言翻译我的ExtJS应用程序.我的问题是我正在使用ExtJS MVC框架,我的大多数JS文件都是由框架本身动态下载的.

理想的解决方案(我想到的)是在Ext.Loader(或我的Ext.app.Application)中有一个额外的选项来定义要使用的语言,并根据此选项自动下载这样的文件为" a.MyClass.fr.js"在加载我的"a.MyClass.js"之后(它将包含一个Ext.apply,覆盖我的字符串资源).目前可能还没有在ExtJS框架中提供.

我能看到的替代解决方案是在服务器端执行一个技巧.首先,将在客户端上创建一个cookie,以设置为该语言.在服务器端,我可以捕获对JS文件的所有请求,然后如果设置了cookie(例如='fr'),我将所请求的JS文件(MyClass.js)与其i18n的朋友(MyClass)组合在一起.fr.js)动态地在服务器上返回结果.这样可行,但它真的很棘手,因为它意味着其他事情(缓存......).

也许最好的方法是实现我在ExtJS框架中描述的第一个行为......

你怎么看？我正在寻找一种非常干净利落的方式!谢谢 :)

Answer 1

我最近一直在努力解决同样的问题.

找到一个干净的方法来做到这一点是一个相当大的挑战 - 大多数替代方案要么......

1)每个区域设置复制代码库(WTH)

2)下载覆盖每个组件的本地化文件(维护地狱？那些可怜的译员怎么样？)

3)使用/生成包含翻译的静态文件并引用它(所有语言都已下载？生成它的额外构建步骤？如何使它们保持同步？)

我试图获得最好的世界,并最终得到一个实用工具类负责:

1)加载ExtJS转换文件(基本上适用于extjs基本组件的覆盖)

2)从服务器加载特定于语言环境的属性resourcebundle(指定要加载的语言环境).

3)Prototyping String with translate()方法,用于查询加载的存储(包含来自服务器的消息包),并根据字符串的值返回转换.

这是事情的要点:

捆绑和原型制作:

localeStore.load({
    callback : function(records, operation, success) {
        // Define translation function (NB! Must be defined before any components which want to use it.)
        function translate() {
            var record = localeStore.getById(this.valueOf()) ;
            if(record === null) {
                alert('Missing translation for: ' + this.valueOf()); // Key is not found in the corresponding messages_<locale>.properties file.
                return this.valueOf(); // Return key name as placeholder
            } else {
                var value = record.get('value');
            }
            return value;
        }

        String.prototype.translate = translate;
        callback.call(); // call back to caller(app.js / Ext.Application), loading rest of application
    }
});

作为一个例子从一个角度来看:

this.copyButton = Ext.create('Ext.button.Button', {
    disabled: true,
    text: 'DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON'.translate(),
    action: 'openCopyDialog'
});

服务器上的Bundle(mesages_en.properties):DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON =复制文件等.

优点:

• 没什么大惊小怪的代码,'Your_key'.translate()使得它易于阅读并意识到这是一个本地化的字符串
• 没有/很少维护开销(为每个语言环境保留一个覆盖文件？耶稣......)
• 你只加载你需要的语言环境 - 而不是整个shabang.
• 如果您真的想要,您甚至可以在同一个包中为ExtJS语言环境文件创建自己的翻译.
• 您可以编写单元测试以确保所有包都包含相同的密钥,从而避免以后的孤立转换

缺点:

• 同步 - 必须在主应用程序启动之前加载商店.我通过从实用程序类添加一个回调来解决这个问题,该回调函数在加载所有文本后调用.
• 没有实时的文本数量..虽然我不想让我的用户超载服务器:P

到目前为止,我的方法已经很好地满足了我的要求.站点负载不会明显变慢,并且在加载期间,捆绑(每个捆绑包含约200个键/值)在~10kb时测量出来.