ユーザーが理解でき、使い慣れた表記規則の言語でコミュニケーションすることは不可欠です。Ext JS は、インドネシアからマケドニアまで40以上の言語に対応するローカリゼーションパッケージにバンドルされ、設定がシンプルです。
ロケール
ext-locale パッケージのオーバーライドフォルダにバンドルされたロケールファイルがすべてあります。ロケールファイルは Ext JS に特定のコンポーネントの英語の既定値を置換するように指示するオーバーライドに過ぎません。これらは月、日、名前などの一般な日付フォーマットです。
デートピッカーは最たる例です。ここではスペイン語のローカライズファイルからの抜粋を見ていきましょう:
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
});Sencha Cmd でのローカライズ
ローカライズを実装するには、Sencha Cmd が生成したアプリケーションで app.json ファイルを変更するだけです。requires ブロックに “ext-locale” パッケージを追加したいと思うでしょう。追加すると以下のように表示されます。
/**
* 必要なパッケージのリスト（オプションのバージョン、デフォルトは "latest"）。
*
* 例：
*
* "requires": [
* "sencha-charts"
* ]
*/
"requires": [
"ext-locale"
],アプリケーションはこれでローカライズの準備ができました。次の手順では追加する言語を決定します。必要なのはロケール設定を作成するだけです。以下の行を app.json ファイルに追加するだけです。
"locale": "es",注意：ロケール設定はデフォルトのエントリではありません。これを app.json ファイルに手動で追加する必要があります。
app.json が更新されたので、sencha app build を実行すると、Sencha Cmd が変更を処理します。最新に更新されると、英語の値のあるコンポーネントにスペイン語の値が含まれていることが分かります。
Sencha Cmd を使用しないローカライズ
Sencha Cmd を使用せずに Ext JS をローカライズする最も簡単な方法は、インデックスファイルにロケールファイルを含めることです。
<!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>Ext JS エクステンションのローカライズ
カスタムコンポーネントやプラグインを記述する場合、Ext JS のローカライゼーションのベストプラクティスに従うようにしたいと考えるでしょう。最低でも、ユーザーに表示されるテキスト文字列すべてをプロパティとして定義する必要があります。
Ext.define("Ext.ux.Weather", {
sunText: "It's a nice sunny day",
rainText: "Bad weather, don't go out",
// ...other code...
});日付を操作する場合は特に注意を払いたいです。すべての言語に独自の記述方法があります。拡張機能が日付をレンダリングする場合、フォーマットを指定する config オプションを提供します。この方法は、拡張機能のユーザーが簡単にロケール固有のパーツを上書きすることができます。
Ext JS 内ですでに変換されたメッセージのあるコンポーネント（“OK” ボタンをレンダリングする場合に Ext.MessageBox.buttonText.ok を使用するなど）を使用することでほとんどのローカライズの必要性を回避できます。