Ext.js 本地化

2022-06-09 14:05 更新

全世界的用戶使用的語言都是不同的,最好用他們理解和喜歡的語言來溝通用戶。 Extjs本地化包支持超過40種語言,如德語,法語,韓語,中文等。
 在ExtJs中實現(xiàn)區(qū)域設置非常簡單。您將在ext-locale軟件包的覆蓋文件夾中找到所有捆綁的區(qū)域設置文件。 語言環(huán)境文件只是覆蓋,它指示Ext JS替換某些組件的默認英語值。

這個程序是要顯示不同區(qū)域設置的月份來看效果,試試下面的程序:

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript" src="./ext-6.0.0/build/classic/locale/locale-zh_CN.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>

這會產(chǎn)生以下結果:


描述:

對于使用不同的語言環(huán)境,除了英語,我們需要在我們的程序中添加區(qū)域設置特定的文件,如果需要設置為法語,可以使用??./ext-6.0.0/build/classic/locale/locale-fr.js??。 您可以對不同的語言使用不同的區(qū)域設置,例如

?./ext-6.0.0/build/classic/locale/locale-ko.js??等。

這個程序是顯示日期選擇器在韓國語區(qū)域查看效果,嘗試以下程序:

<!DOCTYPE html>
<html>
   <head>
      <link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
      <script type="text/javascript" src="./ext-6.0.0/build/ext-all.js"></script>
      <script type="text/javascript" src="./ext-6.0.0/build/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>

這會產(chǎn)生以下結果:


下面是ExtJS中可用的幾個區(qū)域設置和要更改的主文件區(qū)域設置URL。

語言環(huán)境 語言 區(qū)域設置URL
ko Korean ./ext-6.0.0/build/classic/locale/locale-ko.js
fr French ./ext-6.0.0/build/classic/locale/locale-fa.js
es Spanish ./ext-6.0.0/build/classic/locale/locale-es.js
ja Japanese ./ext-6.0.0/build/classic/locale/locale-ja.js
it Italian ./ext-6.0.0/build/classic/locale/locale-it.js
ru Russian ./ext-6.0.0/build/classic/locale/locale-ru.js
zh_CN 簡體中文 ./ext-6.0.0/build/classic/locale/locale-zh_CN.js


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號