Contents Sencha Cmd での RTL RTL の有効化 RTL のあるロケール RTL ロケールのオーバーライド Sencha Cmd を使用しない RTL

Ext JS における Right-to-Left サポート

Ext JS には、世界中の40以上の言語をサポートする幅広いロケールライブラリが用意されています。これらの言語の一部は右から左に読みます。このため、RTL（Right-to-left）のサポートは必須です。Ext JS のローカライゼーションパッケージに RTL サポートを組み合わせることで、アプリケーションに世界中の言語に対応できるようになります。

本ガイドでは、アプリケーションで RTL サポートを有効にする方法について説明しています。

注意：アプリケーションでローカライゼーションを有効にするためには、Ext JS ロケールガイドを参照してください。

Sencha Cmd での RTL

Sencha Cmd を使用してアプリケーションを生成してみましょう。ターミナルを開いて、以下のコマンドを発行するだけです。

sencha generate app -ext MyApp ./app
cd app
sencha app watch

注意：上記の内容に精通していない場合、はじめにを参照してください。

RTL の有効化

RTL を Cmd 生成アプリで有効にするのは驚くほどシンプルです。Ext.rtl.* のrequireと、rtl: true を設定するだけです。

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'Ext.rtl.*'
    ],
    rtl: true,
    ...

生成されたアプリケーションの場合、上記のコードを Main.js に追加します。これは app/view/main フォルダにあります。これは、このインスタンスの指定ビューポートです。生成されたアプリケーションを使用していない場合、最上位コンテナまたはビューポートに追加できます。

上記のコードスニペットを追加したら、アプリケーションを再ビルドできます。

sencha app build

アプリケーションを更新したら、ページ要素が水平に反転しテキストが右から左に記述されているのが分かります。

rtl: true のある最上位コンテナのすべての子は同じ機能を継承します。子要素で rtl:false を示して、アプリケーションの特定の場所で RTL を無効にすることができます。

RTL のあるロケール

ヘブライ語など RTL のあるロケールを使用すると、近い将来デフォルトでアプリケーションを RTL に切り替えるようになります。ただし、現時点ではこの機能はビューポートに結び付けられており、Ext.container.Viewport 以外のコンテナで autoCreateViewport を使用する場合に有効ではありません。

この場合、上記のようにアプリケーションに RTL を有効にできます。

ただし、複数のロケールを組み合わせている場合にアプリケーションにハードコードの RTL サポートは必要ないかもしれません。この場合、ロケールのオーバーライドをアプリケーションのルートディレクトリの言語に追加する必要があります。

RTL ロケールのオーバーライド

このセクションでは、Hebrew ロケールにおけるオーバーライドの追加について説明します。ダイナミック RTL サポートのオーバーライドが必要なロケール以外にこれと同じロジックが適用されます。“he” をアプリケーションの略語で置き換えるだけです。

アプリケーションのルートに “locale” と呼ばれるフォルダを作成します。これは app、build、ext などと同じレベルに表示されます。
ロケールフォルダの内側にロケールの略語のあるフォルダを追加します。この場合、“he” と呼ばれるフォルダを作成します。
Viewport.js と名付けたファイルを “he” フォルダ内に作成します。ファイル構造は次のようになります。
それから、オーバーライドファイル　Viewport.js　に次のオーバーライドを追加できます:
```
Ext.define('MyApp.locale.he.Viewport', {
    override: 'Ext.plugin.Viewport',
    requires: 'Ext.rtl.*',
    setCmp: function (cmp) {

        this.callParent([cmp]);

        cmp.rtl = true;
    }    
})
```
オーバーライドが準備できたので、オーバーライドが app.json にあることをアラートする必要があります。これによって、Cmd がオーバーライドを識別して次のビルド時にコンパイルするようになります。次の行を app.json ファイルに追加します。
```
"overrides": "${app.dir}/overrides,${app.dir}/locale/${app.locale},
```

これによって、Cmd はアプリケーションのオーバーライドとロケールフォルダ内のファイルを利用するように指示します。

このオーバーライドが用意できたら、親コンテナにハードコード RTL サポートを行わずに複数のロケールをサポートするアプリケーションを生成する準備ができることになります。

Sencha Cmd を使用しない RTL

ユーザーに Sencha Cmd 内の強力なツールを活用するように推奨していますが、Sencha Cmd を利用できないユーザーがいることも認識しています。本ガイドのこの部分では、Sencha Cmd を使用しない RTL サポートの設定について説明します。

RTL フレームワークファイルの特定部分にポイントするように、index.html ファイルを更新します。これは、Ext JS 4.2.0以降の Ext JS フレームワークのすべてのダウンロードに含まれています。例：
```
build/ext-all-rtl-debug.js
build/ext-all-rtl.js
```
これは、RTLの特定のライブラリをロードするためのアプリケーションを変更します。
Ext JS 4.2.0以降のすべての Ext JS フレームワークのダウンロードに含まれる、選択したテーマの RTL CSS ファイルをポイントするように index.html ファイルを更新します。これらのデフォルトの場所はここになります。
```
build/packages/ext-theme-{themename}/build/resources/ext-theme-{themename}-all-rtl.css
```
最後に、rtl: true をビューポートに追加します。

これは、RTL サポート対応の Neptune を使用したサンプル index.html ファイルです。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello RTL</title>

        <link rel="stylesheet" type="text/css" href="build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-rtl.css">
        <script type="text/javascript" src="/releases/extjs/5.0.0/build/ext-all-rtl.js"></script>
        <script type="text/javascript" src="build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

        <script>

            Ext.application({
                name: 'MyApp',
                launch: function() {

                    Ext.create('Ext.container.Viewport', {
                        renderTo: Ext.getBody(),
                        rtl : true,
                        html: "hello I am a bunch of text"
                    });              

                }
            });

        </script>

    </head>
    <body>
    </body>
</html>

注意：上記のように Neptune オーバーライド JS ファイルを含めるようにしてください。

Last updated

12月 12, 2014