Tutorial:Localizing Ext (本地化ext)

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量396 收藏
点赞数
分类专栏： javascript 文章标签： ext localization function stylesheet javascript application
 

1 引言
2 慢慢开始
3 原理是？？
4 本地化文件的葫芦里卖的什么药？
5 应用程序的本地化
6 高级提示

引言
如果你是英语的用户就不必做任何本地化的工作了，这篇教程是为非英语用户所准备的，好像一般的用户，开发主管，业务员等，他们的外语可能稍逊，这样就需要你对如何本地化ext的整个流程了解一番了。

慢慢开始
如果你曾浏览Ext 2.x目录的树状结构，你就会发现source/locale的目录（或SVN目录的src/locale）。此目录包含了Ext本地化类。先不长篇大论地讲太多概念的东西，我们应了解如何先使用。

下面的一个例子就是使用了本地化的ext，但是不是在ext同一个目录下的。因此通常的，你需要调整head标签内的路径，以正确指向Ext的安装目录。尤其注意本地化的那个目录路径。

把你服务器的路径Copy and paste到相应文件路径中：

注意： 下里的代码我是动态加载到head头部的，只能在FireFox通过。不过实际情况你不必如此，你只要在服务端指定script的路径而不必动态加载。

view plain copy to clipboard print ?
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type"  content= "text/html; charset=utf-8" >  
  4.     <link rel="stylesheet"  type= "text/css"  href= "../ext/resources/css/ext-all.css" >  
  5.     <script type="text/javascript"  src= "../ext/adapter/ext/ext-base.js" ></script>  
  6.     <script type="text/javascript"  src= "../ext/ext-all-debug.js" ></script>  
  7.     <script type="text/javascript" >  
  8.    
  9.     //根据url上指定的语言进行解码   
  10.     var  locale = window.location.search   
  11.                  ? Ext.urlDecode(window.location.search.substring(1)).locale   
  12.                  : '' ;  
  13.    
  14.     // 将本地化的JS文件加入head元素内   
  15.     var  head = Ext.fly(document.getElementsByTagName( 'head' )[0]);  
  16.     if (locale) {  
  17.         Ext.DomHelper.append(head, {  
  18.              tag:'script'   
  19.             ,type:'text/javascript'   
  20.             ,src:'../ext/src/locale/ext-lang-'  + locale +  '.js'   
  21.         });  
  22.     }  
  23.    
  24.     //预先定义的window继承类   
  25.     Ext.ns('Tutorial' );  
  26.     Tutorial.LocalizationWin = Ext.extend(Ext.Window, {  
  27.         initComponent:function () {  
  28.             Ext.apply(this , {  
  29.                  width:500  
  30.                 ,id:'winid'   
  31.                 ,height:300  
  32.                 ,layout:'fit'   
  33.                 ,border:false   
  34.                 ,closable:false   
  35.                 ,title:Ext.get('title' ).dom.innerHTML  
  36.                 ,items:[{  
  37.                      xtype:'form'   
  38.                     ,frame:true   
  39.                     ,defaultType:'textfield'   
  40.                     ,items:[{  
  41.                           xtype:'combo'   
  42.                          ,fieldLabel:'Select Language'   
  43.                          ,name:'locale'   
  44.                          ,store:new  Ext.data.SimpleStore({  
  45.                              id:0  
  46.                             ,fields:['file' ,  'locale' ]  
  47.                             ,data:[  
  48.                                  ['cs' ,  'Czech' ]  
  49.                                 ,['' ,  'English' ]  
  50.                                 ,['fr' ,  'French' ]  
  51.                                 ,['de' ,  'German' ]  
  52.                                 ,['gr' ,  'Greece' ]  
  53.                                 ,['hu' ,  'Hungarian' ]  
  54.                                 ,['it' ,  'Italian' ]  
  55.                                 ,['ja' ,  'Japaneese' ]  
  56.                                 ,['pl' ,  'Polish' ]  
  57.                                 ,['pt' ,  'Portugal' ]  
  58.                                 ,['ru' ,  'Russian' ]  
  59.                                 ,['sk' ,  'Slovak' ]  
  60.                                 ,['es' ,  'Spanish' ]  
  61.                                 ,['sv_SE' ,  'Swedish' ]  
  62.                                 ,['tr' ,  'Turkish' ]  
  63.                             ]  
  64.                          })  
  65.                         ,listeners:{  
  66.                             select:{fn:function (combo){  
  67.                                 window.location.search = '?'    
  68.                                     + Ext.urlEncode({locale:combo.getValue()})  
  69.                                 ;  
  70.                             }}  
  71.                         }  
  72.                         ,mode:'local'   
  73.                         ,editable:false   
  74.                         ,forceSelection:true   
  75.                         ,valueField:'file'   
  76.                         ,displayField:'locale'   
  77.                         ,triggerAction:'all'   
  78.                         ,value:locale  
  79.                      },{  
  80.                          fieldLabel:'Text Field'   
  81.                         ,allowBlank:false   
  82.                     },{  
  83.                          xtype:'datefield'   
  84.                         ,fieldLabel:'Date Field'   
  85.                         ,allowBlank:false   
  86.                     }]  
  87.                 }]  
  88.             }); // eo apply   
  89.             Tutorial.LocalizationWin.superclass.initComponent.apply(this , arguments);  
  90.         } // eo function initComponent   
  91.     }); // eo Tutorial.LocalizationWin   
  92.    
  93. Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif' ;  
  94. Ext.onReady(function () {  
  95.     Ext.QuickTips.init();  
  96.     Ext.form.Field.prototype.msgTarget = 'side' ;  
  97.    
  98.     // create example window   
  99.     var  win =  new  Tutorial.LocalizationWin();  
  100.     win.show();  
  101. });  
  102.     </script>  
  103.     <title id="title" >Localization Example</title>  
  104. </head>  
  105. <body>  
  106. </body>  
  107. </html>  

现在完整的本地化工作是限于ComboBox、TextField和DateField这些Ext基础组件。试试在已翻译好的DataPicker组件中输入一些文字。

原理是？？
原理是一改变cobmo box里面的"Select Language"就会包含（include）相应的Ext本地化文件（这里我使用了一些技巧性的做法，改变本地化文件的过程是用过客户端脚本完成的）

本地化文件的葫芦里卖的什么药？
首先要打开本地化文件来看看，读懂里面的源码后不但对Ext的理解有帮助而且对整个程序的本地化，也是有帮助的。我们以法语版的DatePicker为例子：

view plain copy to clipboard print ?
  1. if (Ext.DatePicker){  
  2.    Ext.override(Ext.DatePicker, {  
  3.       todayText         : "Aujourd'hui" ,  
  4.       minText           : "Cette date est antérieure à la date minimum" ,  
  5.       maxText           : "Cette date est postérieure à la date maximum" ,  
  6.       disabledDaysText  : "" ,  
  7.       disabledDatesText : "" ,  
  8.       monthNames        : Date.monthNames,  
  9.       dayNames          : Date.dayNames,  
  10.       nextText          : 'Mois suivant (CTRL+Flèche droite)' ,  
  11.       prevText          : "Mois précédent (CTRL+Flèche gauche)" ,  
  12.       monthYearText     : "Choisissez un mois (CTRL+Flèche haut ou bas pour changer d'année.)" ,  
  13.       todayTip          : "{0} (Barre d'espace)" ,  
  14.       okText            : " OK " ,  
  15.       cancelText        : "Annuler" ,  
  16.       format            : "d/m/y" ,  
  17.       startDay          : 1  
  18.    });  

通过观察，我们得知如果DataPicker对象存在（这是需要检测的，事因有些ext是你自己可制定的）就重写DataPicker的部分属性； 更严格说，我们是把法语的文字替换掉英语的文字而已。Ext.override的作用是在DatePicker建立实例之前改变class的原型。

应用程序的本地化
我们对范例文件略加修改，把所有的静态文本变为类成员，修改过后看起来是这样的：

view plain copy to clipboard print ?
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type"  content= "text/html; charset=utf-8" >  
  4.     <link rel="stylesheet"  type= "text/css"  href= "../ext/resources/css/ext-all.css" >  
  5.     <script type="text/javascript"  src= "../ext/adapter/ext/ext-base.js" ></script>  
  6.     <script type="text/javascript"  src= "../ext/ext-all-debug.js" ></script>  
  7.    
  8.     <!-- Ext localization javascript -->  
  9.     <script type="text/javascript"  id= "extlocale" ></script>  
  10.    
  11.     <!-- Locale and example extension javascript -->  
  12.     <script type="text/javascript" >  
  13.    
  14.     // decode language passed in url   
  15.     var  locale = window.location.search   
  16.                  ? Ext.urlDecode(window.location.search.substring(1)).locale   
  17.                  : ''   
  18.     ;  
  19.    
  20.     // append locale script to the head   
  21.     var  head = Ext.fly(document.getElementsByTagName( 'head' )[0]);  
  22.     if (locale) {  
  23.         Ext.fly('extlocale' ).set({src: '../ext/src/locale/ext-lang-'  + locale +  '.js' });  
  24.     }  
  25.    
  26.     // create pre-configured example window extension class   
  27.     Ext.ns('Tutorial' );  
  28.     Tutorial.LocalizationWin = Ext.extend(Ext.Window, {  
  29.          titleText:'Localization Example'   
  30.         ,selectLangText:'Select Language'   
  31.         ,textFieldText:'Text Field'   
  32.         ,dateFieldText:'Date Field'   
  33.         ,initComponent:function () {  
  34.             Ext.apply(this , {  
  35.                  width:500  
  36.                 ,id:'winid'   
  37.                 ,height:300  
  38.                 ,layout:'fit'   
  39.                 ,border:false   
  40.                 ,closable:false   
  41.                 ,title:this .titleText  
  42.                 ,items:[{  
  43.                      xtype:'form'   
  44.                     ,frame:true   
  45.                     ,defaultType:'textfield'   
  46.                     ,items:[{  
  47.                           xtype:'combo'   
  48.                          ,fieldLabel:this .selectLangText  
  49.                          ,name:'locale'   
  50.                          ,store:new  Ext.data.SimpleStore({  
  51.                              id:0  
  52.                             ,fields:['file' ,  'locale' ]  
  53.                             ,data:[  
  54.                                  ['cs' ,  'Czech' ]  
  55.                                 ,['' ,  'English' ]  
  56.                                 ,['fr' ,  'French' ]  
  57.                                 ,['de' ,  'German' ]  
  58.                                 ,['gr' ,  'Greece' ]  
  59.                                 ,['hu' ,  'Hungarian' ]  
  60.                                 ,['it' ,  'Italian' ]  
  61.                                 ,['ja' ,  'Japaneese' ]  
  62.                                 ,['pl' ,  'Polish' ]  
  63.                                 ,['pt' ,  'Portugal' ]  
  64.                                 ,['ru' ,  'Russian' ]  
  65.                                 ,['sk' ,  'Slovak' ]  
  66.                                 ,['es' ,  'Spanish' ]  
  67.                                 ,['sv_SE' ,  'Swedish' ]  
  68.                                 ,['tr' ,  'Turkish' ]  
  69.                             ]  
  70.                          })  
  71.                         ,listeners:{  
  72.                             select:{fn:function (combo){  
  73.                                 window.location.search = '?'    
  74.                                     + Ext.urlEncode({locale:combo.getValue()})  
  75.                                 ;  
  76.                             }}  
  77.                         }  
  78.                         ,mode:'local'   
  79.                         ,editable:false   
  80.                         ,forceSelection:true   
  81.                         ,valueField:'file'   
  82.                         ,displayField:'locale'   
  83.                         ,triggerAction:'all'   
  84.                         ,value:locale  
  85.                      },{  
  86.                          fieldLabel:this .textFieldText  
  87.                         ,allowBlank:false   
  88.                     },{  
  89.                          xtype:'datefield'   
  90.                         ,fieldLabel:this .dateFieldText  
  91.                         ,allowBlank:false   
  92.                     }]  
  93.                 }]  
  94.             }); // eo apply   
  95.             Tutorial.LocalizationWin.superclass.initComponent.apply(this , arguments);  
  96.         } // eo function initComponent   
  97.     }); // eo Tutorial.LocalizationWin   
  98.     </script>  
  99.    
  100.     <!-- Application localization javascript -->  
  101.     <script type="text/javascript"  id= "applocale" ></script>  
  102.    
  103.     <!-- Set src for  application localization javascript -->  
  104.     <script>  
  105.     if (locale) {  
  106.         Ext.fly('applocale' ).set({src: 'app-lang-'  + locale +  '.js' });  
  107.     }  
  108.     </script>  
  109.    
  110.     <!-- Main application -->  
  111.     <script type="text/javascript" >  
  112.     Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif' ;  
  113.     Ext.onReady(function () {  
  114.         Ext.QuickTips.init();  
  115.         Ext.form.Field.prototype.msgTarget = 'side' ;  
  116.    
  117.         // create example window   
  118.         var  win =  new  Tutorial.LocalizationWin();  
  119.         win.show();  
  120.     });  
  121.     </script>  
  122.     <title id="title" >Localization Example</title>  
  123. </head>  
  124. <body>  
  125. </body>  
  126. </html>  

最后一步，我们需要为特定的语种创建程序本地化的文件（翻译，语种）。这里是app-lang-sk.js文件因为我操的是斯洛伐克语的缘故。你可因应你需求的语种去设置（保存html的格式放到同一目录下或修改上面代码的目录）：

view plain copy to clipboard print ?
  1. /**  
  2.  * 斯洛伐克语版的教程之本地化文件  
  3.  */   
  4. if (Tutorial.LocalizationWin) {  
  5.     Ext.override(Tutorial.LocalizationWin, {  
  6.          titleText:'Príklad lokalizácie'   
  7.         ,selectLangText:'Zvoľ jazyk'   
  8.         ,textFieldText:'Textové pole'   
  9.         ,dateFieldText:'Dátumové pole'   
  10.     });  
  11. }  

高级提示
请明确，要做Ext程序的本地化需要遵循哪些的原则。关键点在于将所有翻译文本作为公共类的成员出现，重写原先类的prototype的属性

Advanced developers will immediately feel some drawback of having, maintaining and deploying that many localization files especially if they already have a server with some translating infrastructure such as GNU gettext. For these users I would recommend to generate localization files on the fly by the server using gettext as backend.

这种做法最大的好处是可讲翻译文件集中在一块(*.po)，客户端和服务端都可以使用。

如果本地化这主题反映还不错的话而读者又非常想进一步了解我会写进阶的Ext本地化。


Author: Jozef Sakalos(译者：Frank Cheung)
Published: March 9, 2008
Ext Version: 2.0+

文章来自：http://extjs.com/learn/Tutorial:Localizing_Ext_%28Chinese%29

kinglino520
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vk_raytracing_tutorial:Vulkan光线跟踪教程
05-05
光线追踪教程第一个教程从Vulkan代码示例开始，该示例可以加载多个OBJ并使用光栅化器对其进行渲染，并逐步添加进行射线跟踪所需的内容。走得更远从这一点开始，您可以继续创建自己的射线类型和着色器，并尝试使用更...
如何本地化ext
sp42的专栏
04-26 176
[b]引言[/b] 如果你是英语的用户就不必做任何本地化的工作了，这篇教程是为非英语用户所准备的，好像一般的用户，开发主管，业务员等，他们的外语可能稍逊，这样就需要你对如何本地化ext的整个流程了解一番了。 [b]慢慢开始[/b] 如果你曾浏览Ext 2.x目录的树状结构，你就会发现source/locale的目录（或SVN目录的src/locale）。此目录包含了Ext本地化类...
Sencha Ext JS 国际化和本地化
eTimeChen的专栏
07-29 6413
Sencha Ext JS 国际化和本地化 对Ext JS的国际化和本地化做了些研究,有了些体会和总结,在此备忘. 首先将官方博客关于国际化和本地化的内容进行翻译,因为这篇文章很好的告诉我们该如何用Ext JS实现国际化和本地化,然后是根据自身项目的特点总结出一套自己的方案 官方博客翻译 原文地址:https://www.sencha.com/blog/internationaliza
10.3 本地化Ext（2）
kinglino520的专栏
06-11 426
 10.3  本地化Ext（2）下面是实现本地化功能示例的全部源代码。HTML代码清单10-3-1本地化例子href="../../resources/css/ext-all.css">// decode language passed
LOCAL_相关参数总结
Coding···
12-20 955
LOCAL_CFLAGS参数 此段转自CSDN博主「沉默的过客」的原创文章 原文链接：https://blog.csdn.net/u014135607/article/details/79980018 -D LOCAL_CFLAGS += -DXXX 相当于在所有源文件中增加一个宏定义#define -O 代表默认优化，可选：-O0不优化，-O1低级优化，-O2中级优化，-O3高级优...
在Ext JS 6中添加本地化包
weixin_34055787的博客
07-08 230
我在官方论坛发的帖子终于有人恢复了，也终于知道如何添加本地化包了。在Ext JS 6中，Ext JS属于经典工具包，而本地化是包含在经典工具包中，因而在app.json中，要添加本地化包，必须在classic成员中添加，代码如下： "classic": { "js": [ { // Remov...
tutorial:Dgraph之旅
04-28
可以通过克隆此repo并运行scripts/local.sh在本地运行该教程。 这次巡回赛已经使用hugo v0.37进行了测试。 要在本地开发和测试版本重定向，请运行构建脚本： TOUR_BASE_URL=...
Tutorial:Powershell法语教程
05-18
教程 Powershell法语教程
webrtc-tutorial:艰苦学习WebRTC:eyes:
04-29
WebRTC学习指南 艰苦学习WebRTC :eyes:档案执照MIT LicenseCopyright (c) 2021 Matthew LeePermission is hereby granted, free of charge, to any person obtaining a copyof this software and associated ...
purrr-tutorial：purrr简介
02-05
purrr-tutorial：purrr简介
ExtJS的打包
浪里xiao白龙
09-19 1400
ExtJS和Java文件的打包 最近在公司实习，需要打包项目给测试人员，项目用的前台用的是ExtJS框架，后台则用Java常用的框架。平时打包的话直接打成war包就行了，但打包ExtJS前台文件则需要在本地配置相关环境。（老大的鼓励下才第一次写博客，哈哈，相信有第一次就会有第二次的了，加油！） 需要用到的相关软件及配置过程 #1首先肯定是Git ，从云上拉取项目的相关代码，包含依赖库。 下载地址：...
JS的本地化
hdx_008的专栏
05-17 1806
国际化中最基本的就是语言翻译， 同时还有与本地化相关的日期、货币、数字等相关的显示。本文本只关注翻译的问题，其他的可以使用相关的控件完成，如moment.js, format.js  最先想到的就是 translate 组件，可以支持filter, directive, factory格式。基本用法如下：
Ext.chart.Chart 显示图标 -- 本地数据
weixin_30888027的博客
09-12 103
先来张直观的图，基于ext4.2制作 这就是弹出来的图表了。 今天先搭建一个本地数据版，也是静态数据版。 点击一个按钮执行一个function，来看function里面的东西： 一、依赖 Ext.require('Ext.chart.*'); Ext.require(['Ext.Window', 'Ext.fx.target.S...
ext树图标从本地上取得问题
bzhyan的专栏
01-14 675
 发现Ext在生成Tree时默认总是试图访问http://extjs.com/s.gif下载s.gif,在局域网类数的节点导航图片显示不出来。解决方案是：在Ext.onReady()方法之前加上如下代码： Ext.BLANK_IMAGE_URL = ../ExtResources/resources/images/default/s.gif;
Java本地化的实现
m0_52149190的博客
05-26 623
Java Location Java本地化Localizing Date 本地化时间Localizing Currency 本地化货币Localizing Number 本地化数字Localing Text 本地化文本 一.国际化 缩写 i18N（来源于国际化的单词缩写以i开始N结束的18位英文），让开发的程序适应世界上不同国家或地区的过程。 二.本地化 (使程序能适应某个地区或语言的使用习惯的过程) •本地化是通过添加特定语言环境的文本和组件来创建适合特定语言和地区的应用程序的机制。 •本地化
extjs本地化问题已经决绝
jesenblog的专栏
03-20 1328
ExtJS2.0提供了多种语言的本地化功能:以简体中文为例：在/source/下找到一个/locale/ 文件夹，里面有个ext-lang-zh_CN.js 文件，把这个js文件引用到你的页面上：javascript" src="ExtJs/source/locale/ext-lang-zh_CN.js">注意:1.上面这行要放在 之后。       2.jsp页面的字符集编码一定要是
java操作本地text文件
weixin_30596023的博客
04-12 121
//按字节读取 public static void readByBytes(String url) { 　　File file = new File(url); 　　InputStream in = null; 　　try { 　　　　in = new FileInputStream(file); 　　　　int temp; 　　　　while ((temp = in.re...
struts2国际化--你知道LocalizedTextUtil吗？
kino
07-03 248
今天在继续发邮件子系统时，遇到了一个问题，就是我们发邮件时也要国际化，就是同一封邮件，发给不同的用户，可能采用的语种也不同。如果有多少个语种就做多少模板，这是不现实的，因我们支持的语种比较多而且模板类型也比较多，这样数量就会大大增加，以后如果有需求更改，将是一个不小的工作量。   当然解决这个问题最好的方法，就是对这些模板里的信息进行国际化，关键是如何国际化。我不想为这个子系统专门建立一个单独的国...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 346
步骤很详细，直接上教程……
opencv tutorial: a guide to learn opencv
12-17
OpenCV是一个开源的计算机视觉库，可用于处理图像和视频。学习OpenCV可以帮助我们在计算机视觉领域开发各种应用程序，如人脸识别、目标检测、图像处理等。下面是学习OpenCV的一些指导： 1. 官方文档和教程：首先，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值