Ext.js-ローカリゼーション

ユーザーが理解し、好む言語でコミュニケーションを取ることが常に最善です。 Extjsローカリゼーションパッケージは、ドイツ語、フランス語、韓国語、中国語などの40以上の言語をサポートしています。 ExtJsでロケールを実装するのは非常に簡単です。 ext-localeパッケージのオーバーライドフォルダーにバンドルされているすべてのロケールファイルがあります。ロケールファイルは、特定のコンポーネントのデフォルトの英語値を置き換えるようにExt JSに指示するオーバーライドのみを行います。

次のプログラムは、異なるロケールで月を表示して効果を確認するものです。次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
            var ds = Ext.create('Ext.data.Store', {
               fields: ['month'],
               remoteSort: true,
               pageSize: 6,

               proxy: {
                  type: 'memory',
                  enablePaging: true,
                  data: monthArray,
                  reader: {type: 'array'}
               }
            });
            Ext.create('Ext.grid.Panel', {
               renderTo: 'grid',
               id : 'gridId',
               width: 600,
               height: 200,
               title:'Month Browser',

               columns:[{
                  text: 'Month of the year',
                  dataIndex: 'month',
                  width: 300
               }],
               store: ds,
               bbar: Ext.create('Ext.toolbar.Paging', {
                  pageSize: 6,
                  store: ds,
                  displayInfo: true
               })
            });
            Ext.getCmp('gridId').getStore().load();
         });
      </script>
   </head>

   <body>
      <div id = "grid"/>
   </body>
</html>

上記のプログラムは次の結果を生成します

英語以外の異なるロケールを使用するには、プログラムにロケール固有のファイルを追加する必要があります。ここでは、フランス語用のhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.jsを使用しています。韓国語などのhttps://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.jsなど、言語ごとに異なるロケールを使用できます。

次のプログラムは、韓国語ロケールで日付ピッカーを表示して効果を確認するものです。次のプログラムを試してください。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
         rel = "stylesheet"/>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>

      <script type = "text/javascript">
         Ext.onReady(function() {
            Ext.create('Ext.picker.Date', {
               renderTo: 'datePicker'
            });
         });
      </script>
   </head>

   <body>
      <div id = "datePicker"/>
   </body>
</html>

上記のプログラムは、次の結果を生成します-

次の表に、ExtJSで使用可能ないくつかのロケールと、変更するメインファイルのロケールURLを示します。

Locale	Language	Locale URL
ko	Korean	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js
fr	French	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js
es	Spanish	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js
ja	Japanese	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js
it	Italian	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js
ru	Russian	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js
zh_CN	Simplifies Chinese	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js

Extjs-localization

Ext.js-ローカリゼーション