Communicating with users in a language that they understand and with conventions that they’re used to is vital. Ext JS comes bundled with a localization package that supports over 40 languages ranging from Indonesian to Macedonian, and it’s simple to implement.
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.
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
});本地化 with Sencha Cmd
To implement localization, simply modify the app.json file in your Sencha Cmd generated classic toolkit based application. You’ll want to add the “ext-locale” package to the requires block. The resulting addition should look like this:
/**
* The list of required packages (with optional versions; default is "latest").
*
* For example,
*
* "requires": [
* "sencha-charts"
* ]
*/
"requires": [
"ext-locale"
],Note: If you’re using a Universal application, you’ll need to add the locale requirement to your classic toolkit’s require’s array:
"classic": {
"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:
"locale": "es",Note: The locale setting is not a default entry. You will need to add this to your app.json file manually.
Now that your app.json is updated, you can run sencha app build and Sencha Cmd will process the changes. Upon refreshing, you should see that any component with English values now contains Spanish values.
本地化 without Sencha Cmd
The simplest way to localize Ext JS without Sencha Cmd is to include the locale file in your index file.
<!DOCTYPE html>
<html>
<head>
<!-- Ensure we're using UTF-8 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>本地化 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>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...
});Localizing Dates
You’ll want to pay extra care when working with dates. Every language tends to have it’s own way of writing them. When your extension renders a date, provide a config option to specify the format. This way users of your extension can easily override the locale-specific parts.
Native 本地化
You can avoid the need for most localization by using components with messages already translated in Ext JS itself (e.g. use Ext.MessageBox.buttonText when rendering “OK” button).
Custom 本地化
If you have defined application classes with text fields, labels, or other localization codes, you will need to override them with customized locale overrides.
The first step is to create a directory in which you will place all your locale overrides. For example, you may wish to put all language overrides in a ‘locale’ directory within your application. This directory would contain subdirectories for each language, corresponding to the locale code (e.g. Spanish overrides in locale/es, French in locale/fr, etc.).
The most important part of this step is to ensure that you isolate each set of language overrides in a directory that matches the value you specify as the locale property in your app.json file.
Once you have created your locale directory structure and your overrides, you need to tell Sencha Cmd to add these classes during the build process.
If you’ve followed the above convention, you can add the following configuration to your app.json overrides property:
"overrides": "${app.dir}/overrides,${app.dir}/locale/${app.locale}",This will allow Sencha Cmd to recursively add all of the class files found under the locale/xx directory, where xx is the locale code specified under locale in the app.json file.