1. 程式人生 > >EXTjs國際化詳解

EXTjs國際化詳解

首先說明一下國際化的原理:Ext是一個充分利用面向物件概念來設計的一個框架,鬆耦合、高內聚的特點讓它本身的元件與使用Ext開發的程式能夠輕鬆地實現系統的國際化功能,所以Ext框架本身也內建了各國語言的本地化檔案,位於source\locale包中。local包中的檔案只支援對日期顯示,控制元件校驗提示的本地化功能,單獨使用它並不能做到整個系統的國際化功能,當然Ext不會知道你的系統使用的是什麼文字,Ext為我們預留了本地化的介面,我們可以方便地實現對系統的本地化功能。

步驟:

1.首先新建不同語言的不同js指令碼檔案。指令碼檔案命名使用ext-lang-(語言名).js的格式較好【語言名可以在瀏覽器語言中獲得(internet選項-常規-語言)】,如ext-lang-zh_CN.js。

每個指令碼檔案中都要定義頁面中使用到的名稱,如

  1. var myProject = {};  
  2. myProject.string = {};  
  3. myProject.string.title = '我的表單';  
  4. myProject.string.lable = '本地化';

在頁面中的呼叫如下:

  1. Ext.define('MyApp.view.MyForm', {  
  2.     extend: 'Ext.form.Panel',  
  3.     height: 250,  
  4.     width: 400,  
  5.     bodyPadding: 10,  
  6.     title: myProject.string.title,  
  7.     initComponent: function() {  
  8.         var me = this;  
  9.         Ext.applyIf(me, {  
  10.             items: [  
  11.                 {  
  12.                     xtype: 'label',  
  13.                     text: myProject.string.lable 
  14.                 }  
  15.             ]  
  16.         });  
  17.         me.callParent(arguments);  
  18.     }  
  19. });  

2.取得瀏覽器語言設定

  String browserLang=request.getLocale().toString();

3.引入國際化檔案(注意:在ext-all.js檔案引入後再引入國際化檔案才有效)

  <script type="text/javascript" src="ext/source/locale/ext-lang-<%=browserLang %>.js"></script>  

4.指定正確的頁面字符集

  <%@ page contentType="text/html; charset=UTF-8" language="java"%>

5.最後系統會根據引入的國家化檔案進行相應的顯示