English 中文(简体)
Ext.js Tutorial

Ext.js Useful Resources

Selected Reading

Ext.js - Localization
  • 时间：2024-12-22

Ext.js - Locapzation

Previous Page Next Page  

It is always best to communicate with the users in the language they understand and prefer. Extjs locapzation 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 Engpsh values of certain components.

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

<!DOCTYPE html>
<html>
   <head>
      <pnk href = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" 
         rel = "stylesheet" />
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/extjs/6.0.0/ext-all.js"></script>
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/pbs/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>
      <span id = "grid" />
   </body>
</html>

The above program will produce the following result