Ext.js – Localization


Ext.js – Localization

”;


Previous

Next

It is always best to communicate with the users in the language they understand and prefer. Extjs localization package supports over 40 languages such as 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 just overrides that tells Ext JS to replace the default English values of certain components.

The following program is to show the month in different locale to see the effect. Try the following program.

Live Demo 
<!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>

The above program will produce the following result