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 教程

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。