初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

日本語化してみる[classic]

今回は日本語化してみましょう。

基本的に言語変更はオーバーライドで文字列を上書きするのですが、classicの場合、パッケージが用意されているので、まずはそれを使います。

/ext/classic/locale/overrides/の下に「af」「bg」といったディレクトリがあります。

日本語は「ja」です。ja/ext-locale-ja.jsを開いてみると、日本語文字列でオーバーライドする処理がたくさん書かれています。

要は、これを組み込めば良いわけです。

app.jsonの変更

まず、app.jsonのrequiresにext-localeを追加します。

"requires": [
    "font-awesome",
    "ext-locale"
]

次にlocaleを追加します。

"locale": "ja"

これでひとまず準備完了です。

確認

sencha app watchして、確認してみます。

分かりやすいExt.picker.Dateを表示してみました。

/**
 * メインパネル。
 *
 * @class Sample.view.main.Panel
 * @extend Ext.panel.Panel
 */
Ext.define('Sample.view.main.Panel', {
    extend: 'Ext.panel.Panel',
    xtype: 'main_panel',

    requires: [
        'Ext.picker.Date'
    ],

    items: [
        {
            xtype: 'datepicker'
        }
    ]

});

f:id:sham-memo:20170318171900p:plain

ちゃんと日本語表記になっていますね。

Developer Toolsで読み込んだjsファイルを確認すると、ext-locale-ja.jsが含まれているのが分かります。

f:id:sham-memo:20170318180657p:plain

次は多言語対応を試してみます。