Ext .js localization

May 09, 2021 Extjs

It's best to communicate with users in a language they understand and like. /b10> Extjs localization packages are available in over 40 languages such as German, French, Korean, Chinese etc.
It's easy to implement locales in ExtJs. Y ou'll find all bundled locale files in the overlay folder of the ext-locale package. /b10> The locale file is simply overwritten, indicating that Ext JS replaces the default English values for some components.

This program is to show the months of different locales 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="/attachements/w3c/ext-all.js"></script>
      <script type="text/javascript" src="/attachements/w3c/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 results in the following:

Describe:

For different language environments, in addition to English, we need to add locale-specific files to our program, and we use https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr .js French. /b11> You can use different locales for different languages, such as https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js for korean, and so on.

This program is to show the date selector in the Chinese korean area 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="/attachements/w3c/ext-all.js"></script>
      <script type="text/javascript" src="/attachements/w3c/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 results in the following:

Here are a few locales available in ExtJS and the master file locale URL to change.

The language environment	Language	The 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	Chinese Simplified	https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-zh_CN.js

Ext .js localization

Cookie Consent