Ext JS comes bundled with a localization package that supports over 40 languages ranging from Indonesian to Macedonian, and it’s simple to implement.
Ext JS包括了一个国际化的模块，里面大约有40多种语言，从印度尼西亚到马其顿，而且非常容易实现。
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.
你可以发现很多国际化文件都被放置在ext-locale目录下面，这些文件都可用于替换默认的英语字符，比如说日期格式，月，日名称等等。
The date picker is a perfect example. Here’s an excerpt from the Spanish localization file:
比如说日期选择就是一个很好的例子，从其西班牙语文件可以看到：
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:
为了实现国际化，需要在你通过sencha cmd命令创建的程序目录下的app.json做一些修改。首先你需要添加一个ext-locale模块。添加的内容如下：
/** * 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:
现在你的程序已经具备国际化的功能，接下来你需要指定你需要的语言。你所需要做的就是在app.json文件里面添加：
"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...
});