引言
如果你是英语的用户就不必做任何本地化的工作了，这篇教程是为非英语用户所准备的，好像一般的用户，开发主管，业务员等，他们的外语可能稍逊，这样就需要你对如何本地化ext的整个流程了解一番了。
慢慢开始
如果你曾浏览Ext 2.x目录的树状结构，你就会发现source/locale的目录（或SVN目录的src/locale）。此目录包含了Ext本地化类。先不长篇大论地讲太多概念的东西，我们应了解如何先使用。
下面的一个例子就是使用了本地化的ext，但是不是在ext同一个目录下的。因此通常的，你需要调整head标签内的路径，以正确指向Ext的安装目录。尤其注意本地化文件的那个目录路径。
把你服务器的路径Copy and paste到相应文件路径中：
注意： 下里的代码我是动态加载到head头部的，只能在FireFox通过。不过实际情况你不必如此，你只要在服务端指定script的路径而不必动态加载。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
//根据url上指定的语言进行解码
var locale = window.location.search
? Ext.urlDecode(window.location.search.substring(1)).locale
: '';
// 将本地化的JS文件加入head元素内
var head = Ext.fly(document.getElementsByTagName('head')[0]);
if(locale) {
Ext.DomHelper.append(head, {
tag:'script'
,type:'text/javascript'
,src:'../ext/src/locale/ext-lang-' + locale + '.js'
});
}
//预先定义的window继承类
Ext.ns('Tutorial');
Tutorial.LocalizationWin = Ext.extend(Ext.Window, {
initComponent:function() {
Ext.apply(this, {
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:Ext.get('title').dom.innerHTML
,items:[{
xtype:'form'
,frame:true
,defaultType:'textfield'
,items:[{
xtype:'combo'
,fieldLabel:'Select Language'
,name:'locale'
,store:new Ext.data.SimpleStore({
id:0
,fields:['file', 'locale']
,data:[
['cs', 'Czech']
,['', 'English']
,['fr', 'French']
,['de', 'German']
,['gr', 'Greece']
,['hu', 'Hungarian']
,['it', 'Italian']
,['ja', 'Japaneese']
,['pl', 'Polish']
,['pt', 'Portugal']
,['ru', 'Russian']
,['sk', 'Slovak']
,['es', 'Spanish']
,['sv_SE', 'Swedish']
,['tr', 'Turkish']
]
})
,listeners:{
select:{fn:function(combo){
window.location.search = '?'
+ Ext.urlEncode({locale:combo.getValue()})
;
}}
}
,mode:'local'
,editable:false
,forceSelection:true
,valueField:'file'
,displayField:'locale'
,triggerAction:'all'
,value:locale
},{
fieldLabel:'Text Field'
,allowBlank:false
},{
xtype:'datefield'
,fieldLabel:'Date Field'
,allowBlank:false
}]
}]
}); // eo apply
Tutorial.LocalizationWin.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}); // eo Tutorial.LocalizationWin
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// create example window
var win = new Tutorial.LocalizationWin();
win.show();
});
</script>
<title id="title">Localization Example</title>
</head>
<body>
</body>
</html>
现在完整的本地化工作是限于ComboBox、TextField和DateField这些Ext基础组件。试试在已翻译好的DataPicker组件中输入一些文字。
原理是？？
原理是一改变cobmo box里面的"Select Language"就会包含（include）相应的Ext本地化文件（这里我使用了一些技巧性的做法，改变本地化文件的过程是用过客户端脚本完成的）
本地化文件的葫芦里卖的什么药？
首先要打开本地化文件来看看，读懂里面的源码后不但对Ext的理解有帮助而且对整个程序的本地化，也是有帮助的。我们以法语版的DatePicker为例子：
if(Ext.DatePicker){
Ext.override(Ext.DatePicker, {
todayText : "Aujourd'hui",
minText : "Cette date est antérieure à la date minimum",
maxText : "Cette date est postérieure à la date maximum",
disabledDaysText : "",
disabledDatesText : "",
monthNames : Date.monthNames,
dayNames : Date.dayNames,
nextText : 'Mois suivant (CTRL+Flèche droite)',
prevText : "Mois précédent (CTRL+Flèche gauche)",
monthYearText : "Choisissez un mois (CTRL+Flèche haut ou bas pour changer d'année.)",
todayTip : "{0} (Barre d'espace)",
okText : " OK ",
cancelText : "Annuler",
format : "d/m/y",
startDay : 1
});
}
通过观察，我们得知如果DataPicker对象存在（这是需要检测的，事因有些ext是你自己可制定的）就重写DataPicker的部分属性；更严格说，我们是把法语的文字替换掉英语的文字而已。Ext.override的作用是在DatePicker建立实例之前改变class的原型。
应用程序的本地化
我们对范例文件略加修改，把所有的静态文本变为类成员，修改过后看起来是这样的：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<!-- Ext localization javascript -->
<script type="text/javascript" id="extlocale"></script>
<!-- Locale and example extension javascript -->
<script type="text/javascript">
// decode language passed in url
var locale = window.location.search
? Ext.urlDecode(window.location.search.substring(1)).locale
: ''
;
// append locale script to the head
var head = Ext.fly(document.getElementsByTagName('head')[0]);
if(locale) {
Ext.fly('extlocale').set({src:'../ext/src/locale/ext-lang-' + locale + '.js'});
}
// create pre-configured example window extension class
Ext.ns('Tutorial');
Tutorial.LocalizationWin = Ext.extend(Ext.Window, {
titleText:'Localization Example'
,selectLangText:'Select Language'
,textFieldText:'Text Field'
,dateFieldText:'Date Field'
,initComponent:function() {
Ext.apply(this, {
width:500
,id:'winid'
,height:300
,layout:'fit'
,border:false
,closable:false
,title:this.titleText
,items:[{
xtype:'form'
,frame:true
,defaultType:'textfield'
,items:[{
xtype:'combo'
,fieldLabel:this.selectLangText
,name:'locale'
,store:new Ext.data.SimpleStore({
id:0
,fields:['file', 'locale']
,data:[
['cs', 'Czech']
,['', 'English']
,['fr', 'French']
,['de', 'German']
,['gr', 'Greece']
,['hu', 'Hungarian']
,['it', 'Italian']
,['ja', 'Japaneese']
,['pl', 'Polish']
,['pt', 'Portugal']
,['ru', 'Russian']
,['sk', 'Slovak']
,['es', 'Spanish']
,['sv_SE', 'Swedish']
,['tr', 'Turkish']
]
})
,listeners:{
select:{fn:function(combo){
window.location.search = '?'
+ Ext.urlEncode({locale:combo.getValue()})
;
}}
}
,mode:'local'
,editable:false
,forceSelection:true
,valueField:'file'
,displayField:'locale'
,triggerAction:'all'
,value:locale
},{
fieldLabel:this.textFieldText
,allowBlank:false
},{
xtype:'datefield'
,fieldLabel:this.dateFieldText
,allowBlank:false
}]
}]
}); // eo apply
Tutorial.LocalizationWin.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}); // eo Tutorial.LocalizationWin
</script>
<!-- Application localization javascript -->
<script type="text/javascript" id="applocale"></script>
<!-- Set src for application localization javascript -->
<script>
if(locale) {
Ext.fly('applocale').set({src:'app-lang-' + locale + '.js'});
}
</script>
<!-- Main application -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// create example window
var win = new Tutorial.LocalizationWin();
win.show();
});
</script>
<title id="title">Localization Example</title>
</head>
<body>
</body>
</html>
最后一步，我们需要为特定的语种创建程序本地化的文件（翻译，语种）。这里是app-lang-sk.js文件因为我操的是斯洛伐克语的缘故。你可因应你需求的语种去设置（保存html的格式放到同一目录下或修改上面代码的目录）：
/**
* 斯洛伐克语版的教程之本地化文件
*/
if(Tutorial.LocalizationWin) {
Ext.override(Tutorial.LocalizationWin, {
titleText:'Príklad lokalizácie'
,selectLangText:'Zvoľ jazyk'
,textFieldText:'Textové pole'
,dateFieldText:'Dátumové pole'
});
}
高级提示
请明确，要做Ext程序的本地化需要遵循哪些的原则。关键点在于将所有翻译文本作为公共类的成员出现，重写原先类的prototype的属性。
这种做法最大的好处是可讲翻译文件集中在一块(*.po)，客户端和服务端都可以使用。
如果本地化这主题反映还不错的话而读者又非常想进一步了解我会写进阶的Ext本地化。
Enjoy!
分享到：
相关推荐
《4.0Ext 本地化：打造符合用户文化的交互体验》 在当今全球化的时代，软件应用不仅要功能强大，还要能够适应不同地区的语言和文化习惯。4.0Ext 提供了强大的本地化功能，帮助开发者为用户提供更加贴心的界面体验。...
如何本地化ext的教程 xtype的含义 扩展Ext中的组件 扩展与插件之间的区别 扩展Ext的新手教程 Ext的类继承 从源码生成Ext 基础用法: DomQuery基础 Ext中的事件 简述模板 模板（Templates）的函数 教你创建Ext UI...
本地化Ext中文API文档，更加详细更加方便，大家学习的必备工具！
在ExtJS中，国际化通常通过加载相应的语言包来实现，这些语言包包含了各个组件和错误消息的本地化字符串。例如，"ext-lang-zh_cn.js"就是这样一个文件，它提供了简体中文的翻译。这个文件包含了ExtJS框架内所有控件...
"EXT中文教程"对英文文档进行了翻译和本地化，对于中文使用者来说，这是一份非常有价值的参考资料。它可以帮助你更好地理解和运用EXT的各类功能，解决在实际开发中遇到的问题。中文教程通常会提供实例代码和详尽的...
4. **自定义组件文本**：对于应用中自定义的组件，需要手动添加本地化文本，可以通过`Ext.Component.override`方法来实现。 了解并熟练掌握这些知识点，开发者可以创建出对全球用户友好的、支持多语言的ExtJS4应用...
4. **数据存储**：EXT支持本地数据存储和远程数据操作，通过Ajax与服务器进行异步通信，实现数据的获取、更新和删除。 5. **图表组件**：EXT 3.0引入了图表组件，支持多种图表类型，如柱状图、饼图、线图等，用于...
3. `ext-lang-zh_CN.js`：这是一个语言包，提供了EXT的中文本地化支持。它包含了EXT框架中所有的错误消息和提示文本，使得用户界面能够以中文显示，这对于在中国或中文环境下运行的应用程序至关重要。 4. `ext-all....
第2章介绍了ext js 4的获取、ext js库的配置与使用、语法、本地化，以及一个经典的入门示例；第3章详细讲解了调试的工具及技巧，这是本书的重要内容，希望所有web开发者都能掌握；第4章全面介绍了ext js的基础架构；...
7. **国际化支持**：EXT2.0增强了对多语言的支持，使得应用程序更容易本地化。 8. **插件系统**：EXT2.0的插件系统更加完善，方便开发者添加自定义功能和扩展。 "AdobeAIRInstaller.exe"可能是一个用于安装Adobe ...
- **国际化和本地化**：EXTJS支持多语言应用，了解如何实现应用的国际化和本地化。 通过EXT-2.3.0的PDF教程，开发者可以系统学习EXTJS的基础知识和实践技巧，逐步提升EXTJS开发能力。在实践中不断探索和掌握EXTJS，...
确保在Web.config中配置好EXT.NET的相关设置，比如主题、本地化和资源加载路径。 2. **EXT.NET控件**：EXT.NET提供了多种服务器控件，如`ExtPanel`（面板）、`ExtGridPanel`（表格）、`ExtForm`（表单）等。你可以...
Ext.Net支持多语言，源代码会包含关于语言包和本地化设置的实现。 深入研究Ext.Net的源代码，有助于开发者了解其工作原理，自定义组件，以及优化Web应用性能。通过学习源代码，开发者可以更高效地利用这个框架，...
9. **国际化和本地化**：手册可能还包括如何进行多语言支持和本地化设置的指南，以适应不同地区用户的需求。 10. **主题和皮肤**：Ext 3.0允许开发者定制和更换应用的主题，以改变UI的外观和感觉。 通过阅读并理解...
6. **图表和可视化**：EXT的图表组件在4.1版本中得到了增强，支持多种图表类型，如折线图、柱状图、饼图等，便于进行数据可视化。 7. **主题和皮肤**：EXT4.1提供了多种预定义的主题，如gray、silver、triton等，...
描述提到"Ext Docs (2.0) 本地化处理，已生成CHM文件了"，这意味着包含的是EXT2文件系统的文档，已经过翻译和整理，形成了CHM（Microsoft的帮助文件格式）便于阅读。 EXT2文件系统全称为Second Extended File ...
"extUI"这个文件可能是EXT界面生成器的主程序或者相关资源包，包含必要的库文件、样式表、图像和其他组件，用于在本地环境中运行该生成器。在解压后，开发者通常需要根据提供的说明进行安装和配置，以便在自己的开发...
`ResourceManager`是EXT.NET中的一个关键组件，它负责管理页面上的所有JavaScript资源，包括CSS样式、脚本文件以及本地化字符串等。在你的示例中，`<ext:ResourceManager ID="ResourceManager1" runat="server" />`...
9. **本地化文件**：如果Ext JS支持多语言，那么会包含各种语言的翻译文件。 10. **第三方库**：为了提供完整的解决方案，可能还会包含其他依赖的JavaScript库或插件。 在解压并使用Ext5.0.7z时，开发者首先需要将...