Friday, February 17, 2017

Ext.js - Localization

It is always best to communicate users in the language they understand and prefer. Extjs localization package supports over 40 languages like German, French, Korean, Chinese etc. It is very simple to implement the locale in ExtJs.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.
This program is to show month in different locale to see the effect, try the following program:
<!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>
This will produce following result:
Description:
For Using different locale other than English we would need to add the locale specific file in our program here we are using https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js for French. You can use different locale for different language such as https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean etc.
This program is to show date picker in Korean locale to see the effect, try the following program:
<!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>
This will produce following result:
Below are the few locales available in ExtJS and the main file locale URL to be changed.
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/locale-zh_CN.js
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)