`
weitd
  • 浏览: 143385 次
  • 性别: Icon_minigender_1
  • 来自: 新都
社区版块
存档分类
最新评论

如何本地化ext的教程

EXTJavaScriptprototype应用服务器SVN 
阅读更多
引言

如果你是英语的用户就不必做任何本地化的工作了，这篇教程是为非英语用户所准备的，好像一般的用户，开发主管，业务员等，他们的外语可能稍逊，这样就需要你对如何本地化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            : "&#160;OK&#160;",
      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的属性

高级开发这也许会体会到这些本地化文件在使用，维护和部署中的不便。尤其是在他们已经采用了诸如GNU gettext这样的翻译架构的时候。对于这些用户，我的建议是通过从服务器动态生成本地化文件，并使用gettext作为后端的生成器。

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

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

转http://www.extjs.com/learn/Tutorial:Localizing_Ext_%28Chinese%29
分享到：
| 创建自定义的事件，然后透过RelayEvents与 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ext教程、ext核心API 、ext中文教程

    "EXT中文教程"对英文文档进行了翻译和本地化，对于中文使用者来说，这是一份非常有价值的参考资料。它可以帮助你更好地理解和运用EXT的各类功能，解决在实际开发中遇到的问题。中文教程通常会提供实例代码和详尽的...

    Ext官方中文教程(可打包下载)

    如何本地化ext的教程 xtype的含义 扩展Ext中的组件 扩展与插件之间的区别 扩展Ext的新手教程 Ext的类继承 从源码生成Ext 基础用法: DomQuery基础 Ext中的事件 简述模板 模板（Templates）的函数 教你创建Ext UI...

    ext-2.3.0+ext教程

    - **国际化和本地化**：EXTJS支持多语言应用，了解如何实现应用的国际化和本地化。 通过EXT-2.3.0的PDF教程，开发者可以系统学习EXTJS的基础知识和实践技巧，逐步提升EXTJS开发能力。在实践中不断探索和掌握EXTJS，...

    EXT中文教程(实例版).pdf

    - **国际化与本地化**: 提供了关于如何使应用程序支持多种语言和文化特性的指导。 - **性能优化**: 包括了缓存策略、异步加载和资源压缩等，帮助开发者构建高性能的Web应用。 ### 实例详解 《EXT中文教程(实例版)...

    ext中文教程

    在"ext中文教程.exe"这个文件中，可能包含的是一个本地化的EXT学习资源，比如教程文档、示例代码、视频讲解等。通过这个教程，开发者可以学习如何安装EXT库，配置开发环境，理解EXT的基本概念，如组件、事件处理、...

    EXT帮助文档(中文EXT3.0 API,中文EXT2.2 API)

    EXTJs资料.chm可能包含了EXT库的综合学习资料，比如教程、示例代码、最佳实践等，这些内容对于初学者和有经验的开发者来说都是非常宝贵的资源。它们可以帮助开发者快速上手EXT，理解其工作原理，以及如何在实际项目...

    Ext Designer Preview3.0汉化版及教程

    在"Ext Designer Preview3.0汉化版及教程"中，我们可以期待获得针对中国用户的本地化版本，以及一系列帮助初学者和有经验的开发者更好地掌握这款工具的教学资源。 1. **Ext Designer 3.0**：此版本是Ext Designer的...

    GWT-EXT2.0最佳实践教程，源代码打包供下载

    《GWT-EXT2.0最佳实践教程》源代码打包下载资源主要涵盖了Google Web Toolkit (GWT) 和EXT-JS 2.0的结合使用，提供了丰富的实践案例和示例代码，旨在帮助开发者深入理解和应用这两项技术。GWT是一款强大的JavaScript...

    EXT界面生成器EXT界面生成器

    "extUI"这个文件可能是EXT界面生成器的主程序或者相关资源包，包含必要的库文件、样式表、图像和其他组件，用于在本地环境中运行该生成器。在解压后，开发者通常需要根据提供的说明进行安装和配置，以便在自己的开发...

    最全面的EXT教程（中文），不管是初学或实际项目，都是你的好帮手

    ### 最全面的EXT教程知识点概览 #### 一、EXT简介与应用场景 EXT是一个非常流行的JavaScript库，主要用于构建用户界面(UI)。它提供了一系列丰富的组件和工具，使得开发者能够快速地开发出高质量的Web应用程序。本...

    Ext5.0.7z包

    9. **本地化文件**：如果Ext JS支持多语言，那么会包含各种语言的翻译文件。 10. **第三方库**：为了提供完整的解决方案，可能还会包含其他依赖的JavaScript库或插件。 在解压并使用Ext5.0.7z时，开发者首先需要将...

    EXT2.2开发环境

    5. **JavaScript代码**：在HTML页面中编写JavaScript代码，初始化EXT应用，定义布局、组件和数据源。EXTJS的API文档是编写代码的重要参考。 6. **浏览器兼容性**：EXT2.2虽然具有广泛的支持，但主要针对现代浏览器...

    EXT可视化工具，Ext_Designer_Preview附带安装说明

    8. **学习资源**：为了更好地利用EXT_Designer_Preview，建议参考EXT官方文档、教程和社区资源，了解各种组件的特性和设计技巧。 EXT可视化工具的使用，不仅减少了手动编写代码的时间，还降低了出错的可能性。对于...

    EXT.net帮助文档

    这份CHM格式的文档包含了EXT.NET的详细API参考、教程、示例以及最佳实践。 EXT.NET的核心特性包括但不限于以下几点： 1. **组件化**：EXT.NET提供了一系列预先构建的UI组件，如表格、面板、表单、树形视图、菜单、...

    Learning Ext JS 3.2

    7. **国际化和本地化**：Ext JS 3.2支持多语言和本地化设置，使应用能够适应不同地区的用户需求。 8. **性能优化**：书中会介绍如何优化Ext JS应用的性能，包括减少HTTP请求、缓存策略和使用ExtJS的优化工具。 9. ...

    Ext Designer Preview3.0汉化版,可生成代码

    通常，用户需要在安装完原始软件后，应用这个汉化包，以实现界面的本地化。 3. **教程**：可能包括文本教程和/或视频教程，帮助用户了解如何使用Ext Designer。这些教程可能会涵盖从基本操作，如添加和布局组件，到...

    创建ext-6.0.2demo

    【创建ext-6.0.2demo】是一个关于使用Ext JS框架构建Web应用程序的实践教程。Ext JS是一款强大的JavaScript库，专为构建富交互式的、数据驱动的Web应用而设计。在6.0.2版本中，它提供了一系列增强的功能和组件，包括...

    Ext Designer Preview3.0汉化版图形界面编辑器

    - **汉化界面**：本地化的中文界面，让中文用户能更好地理解和操作。 3. **使用流程**： - **新建项目**：启动Ext Designer，选择合适的模板创建新项目，或者导入现有的Ext JS应用。 - **设计界面**：通过拖放...

Magicbox
Global site tag (gtag.js) - Google Analytics