Localization in Ext JS

时间 2019-12-14

原文原文链接

Ext JS comes bundled with a localization package that supports over 40 languages ranging from Indonesian to Macedonian, and it’s simple to implement.javascript

Ext JS包括了一个国际化的模块，里面大约有40多种语言，从印度尼西亚到马其顿，并且很是容易实现。css

1. Locales

You’ll find all of the bundled locale files in the override folder of the ext-locale package. Locale files are just overrides that tell Ext JS to replace the default English values of certain components. These are generally things like date formats, month and day names, etc.html

你能够发现不少国际化文件都被放置在ext-locale目录下面，这些文件均可用于替换默认的英语字符，好比说日期格式，月，日名称等等。java

The date picker is a perfect example. Here’s an excerpt from the Spanish localization file:json

好比说日期选择就是一个很好的例子，从其西班牙语文件能够看到：api

Ext.define("Ext.locale.es.picker.Date", {
    override: "Ext.picker.Date",
    todayText: "Hoy",
    minText: "Esta fecha es anterior a la fecha mínima",
    maxText: "Esta fecha es posterior a la fecha máxima",
    disabledDaysText: "",
    disabledDatesText: "",
    nextText: 'Mes Siguiente (Control+Right)',
    prevText: 'Mes Anterior (Control+Left)',
    monthYearText: 'Seleccione un mes (Control+Up/Down para desplazar el año)',
    todayTip: "{0} (Barra espaciadora)",
    format: "d/m/Y",
    startDay: 1
});

2.Localization with Sencha Cmd

To implement localization, simply modify the app.json file in your Sencha Cmd generated application. You’ll want to add the “ext-locale” package to the requires block. The resulting addition should look like this:app

为了实现国际化，须要在你经过sencha cmd命令建立的程序目录下的app.json作一些修改。首先你须要添加一个ext-locale模块。添加的内容以下：ide

/**
 * The list of required packages (with optional versions; default is "latest").
 *
 * For example,
 *
 *      "requires": [
 *          "sencha-charts"
 *      ]
 */
"requires": [
    "ext-locale"
],

Your application is now ready for localization. The next step is to determine the language that you are interested in including. All you need to do is create a locale setting. Simply add the following line to your app.json file:post

如今你的程序已经具有国际化的功能，接下来你须要指定你须要的语言。你所须要作的就是在app.json文件里面添加：ui

"locale": "es",

3.Localization without Sencha Cmd

The simplest way to localize Ext JS without Sencha Cmd is to include the locale file in your index file.

最简单的实现国际化的方式就是直接在你的index.html文件里面添加代码：

<!DOCTYPE html>
<html>
<head>
    <!-- Ensure we're using UTF-8 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Localization example</title>
    <!-- Main Ext JS files -->
    <link rel="stylesheet" type="text/css" href="resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="ext-all.js"></script>      

    <!-- Include the translations -->
    <script type="text/javascript" src="ext-locale-es.js"></script>

    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
                renderTo: Ext.getBody()
            });
        });
    </script>
</head>
<body>

4.Localizing your Ext JS Extensions

You’ll want to ensure that you follow Ext JS best practices for localization when you write a custom component or plug-in. At the very minimum, every text string that’s shown to users should be defined as a property:

你可能想确认一下，若是你本身写了一个窗体或者插件，如何来实现国际化：

Ext.define("Ext.ux.Weather", {
    sunText: "It's a nice sunny day",
    rainText: "Bad weather, don't go out",
    // ...other code...
});

1. D3 & Data Visualization in Ext JS
2. EXT JS
3. 【转】Resource Localization in YARN
4. Overlook the localization of resource in compiling
5. .NET EXT-JS
6. Ext js Msg
7. Ext JS - Hello World
8. Ext JS入门
9. ext js layout and tree
10. Ext JS 5 简介，对比Ext JS 4的改进
更多相关文章...
• SQL IN 操作符 - SQL 教程
• Swift for-in 循环 - Swift 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Java 8 Stream 教程