使用ExtJS实现应用程序本地化-CSDN博客

在Ext JS本地化

创建一个应用程序的工作是一件事;创建一个用户的应用是非常不同的东西。他们习惯于与沟通，他们理解的语言的使用者和公约是至关重要的。

想象这种情况下，你交给你的电话，以真诚的朋友，但他们返回时，一切都在日本人的。沮丧，你要尽量记住哪个组合按钮“设置”菜单，这样你就可以改变它回来，航行通过，你就会意识到，在相反方向的“菜单”幻灯片，甚至配色方案是不同的。你开始意识到是多么重要的语言和文化习俗以及如何迷失方向，它是当面对与本地化设置，没有你的意思是。现在想象你的用户，要使用Ext JS的应用程序，但感觉他们问什么同样的困惑和不确定。

为了解决这个问题，我们经过一个过程被称为“本地化”（有时也被称为L10N）。一个本地化的很大一部分是翻译，值得庆幸的是，Ext JS的更容易本地化您的应用程序。

Ext的本地化文件

Ext JS的副本的根目录中有文件夹的语言环境。这包含45种语言中常见的例子（如天名），从印度尼西亚到马其顿。你可以检查每个看到它们包含什么内容。下面是一个来自西班牙的本地化文件的摘录：

 
       {0}“ ，
        firstText       ： “西甲página” ，
        prevText        ： “Página前” ，
        nextText        ： “Páginasiguiente” ，
        lastText        ： “páginaULTIMA” ，
        refreshText     ： “Actualizar” ，
        displayMsg      ： “Mostrando {0} - {1}的{2}” ，
        emptyMsg        ： “仙DATOS第mostrar” 
    }）; 
}

注：呈现特殊字符，如á显示了字符实体引用。

你可以看到，它会看到如果一个寻呼工具栏是在使用中，如果是这样，适用于西班牙的字符串到每个区域的文字显示。如果你有自定义的文本区域，您可以追加，他们在这里以及相应的翻译。你还会发现，它是将这些属性设置分页工具栏的原型。这样的结果是，创建的每一个新的分页工具栏，将继承这些翻译的特性。

利用本地化

有两种方法可以实现您的应用程序中的本地化：静态或动态。我们要看看如何做它动态地使用户可以选择他们最熟悉哪种语言。首先，我们要创建一个ComboBox，用户将选择自己的语言，其次，我们将演绎从URL的语言，所以，如果用户访问http://yoursite.com/?lang=es~~V你的西班牙语版本使用分机的应用。

设立一个基本的HTML页面的Ext JS的必要组成部分的链接，我们的本地化应用的languages.js，和app.js文件。

<DOCTYPE HTML> 
<HTML> 
<HEAD> 
    <META  HTTP-EQUIV = “内容类型”的 内容= “text / html的字符集= UTF-8” > 
    <TITLE> 本地化的例子</ TITLE> 
    < - EXT！库文件 
       
     
    应用程序的脚本

我们有两个单独的JavaScript文件：首先将所有的语言，Ext JS的自带的列表，第二个是应用程序本身。我们还成立了两个 div 标签，首先将包含组合框供用户选择自己的语言和第二，的DateField，将有一个日期选择器。

现在，创建文件languages.js。在此，我们将存储阵列中的两个值，像这样的语言的语言代码和名称的语言：

分机。命名空间（“Ext.local ）;

 
     
     
     
     
     
     
     
     （英国）“ ]，
    [ '' ， '英语' ] 
    [ 'ES' ， '西班牙/拉丁美洲' ] 
    [ '发' ， '波斯语' ]，
    [ '网络连接' ， '芬兰' ]，
    [ “fr_CA” ，“法语（加拿大）'  ] 
    [ '神父' ， '法语（法国）“ ]，
    [ '克' ， '希腊（旧 
     
     
     
     
     
     
     
     
     
     
     
     巴克摩' ] 
    [ 'no_NN“ ，“挪威  
     
     
     
     
     
     
     
     西里尔文“ ]，
    [ 'SR' ， '塞尔维亚 
     
     
     
     
     
     中国' ，
    'zh_TW' ， '中国传统' ] 
];

这将包括所有的语言文件，但将作为我们的Ext JS的应用程序的一个有用的参考。

下一步，我们将开始构建应用程序本身。使用模块的模式，我们将有四种方法：初始化，调用onSuccess，onFailure处和安装。

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'ext/examples/ux/');
Ext.require([
    'Ext.data.*',
    'Ext.tip.QuickTipManager',
    'Ext.form.*',
    'Ext.ux.data.PagingMemoryProxy',
    'Ext.grid.Panel'
]);

分机。onReady （函数（） {

    MultiLangDemo  =  （函数（） { 
        返回 { 
            的init  （） {

            } 
            的onSuccess ： 函数（） {

            }，
            onFailure处： 函数（） {

            }，
            设置 函数（） {

            
        } } 
    }）（）;

    MultiLangDemo 。的init （）; 
}）;

为了创建组合框将包含所有可能的语言选择，我们首先需要创建一个数组存储在初始化像这样的功能。

店=  分机创建（“Ext.data.ArrayStore ， { 
    字段： [ '代码' ， '语言' ]，
    数据   ： 分机。地方。语言/ /从languages.js 
}）;

这是一个非常简单的商店，它包含两个字段对应的两个值中的每个记录languages.js文件。我们给它一个命名空间，我们可以参考它为Ext.local.languages 。您可以键入您的浏览器的控制台来看看它的组成。

现在创建的ComboBox本身，再次，在init函数：

一

如果您刷新浏览器，你应该看到一个组合框，单击时，显示了捆绑用Ext JS的语言列表。当这些语言被选中，页面刷新，并追加？LANG =大（如果你选择了丹麦）的URL。我们将使用这些信息显示给用户所需的语言。

后创建的ComboBox，我们要来检查，看看如果先前已选择任何语言，并相应地采取行动，检查Ext的URL urlDecode功能。

VAR  的params  =  分机。urlDecode （窗口。位置。搜索。子串（1 ））;

如果 （的params ） { 
    VAR URL =  分机。util的格式。格式（“ext/locale/ext-lang- {0} JS。”  的params ）;

    分机。Ajax的请求（
        URL ：URL ，
        成功 的onSuccess ，
        失败 。onFailure处，
        范围： 
    }）;

    / /检查，如果有是真的1与通过代码语言
    VAR 纪录= 商店。的FindRecord （“代码”  的params 。郎， 空， 空， 空， 真实）; 
    / /如果语言是在商店发现，分配电流值，在组合框

    如果 （记录） { 
        组合。的setValue （记录数据。语言）; 
    
} }   { 
    / /发现没有语言，默认为英语
    设置（）; 
}

分机。小费。QuickTipManager 。的init （）;

注：我们加载一个AJAX请求的文件，那么文件将被上传到服务器，否则他们将无法加载由于浏览器的安全性措施。

在这里你可以看到，为什么我们的onSuccess和onFailure处的方法。如果语言文件加载失败然后用户必须通知代替未能默默。首先，我们要失败的文件处理，使其明显如果需要调试;的想法是，如果在一个不存在的语言代码的用户类型，或出于某种原因已被删除的语言，将显示提醒，使用户不会感到惊讶，应用程序仍是英文。

onFailure处： 函数（） 
    { EXT 消息。警报（'失败' ， '无法加载区域文件“ ）; 
    设置（）; 
}

的onSuccess方法是类似的。我们评估的区域文件，然后设置演示，明知该文件已加载：

的onSuccess ： （响应） 
    的eval （回应。）; 
    设置（）; 
}

我们的AJAX调用返回几个参数。我们使用的JavaScript 的 eval 函数的responseText。responseText的是整个区域设置文件，加载和 eval 分析字符串中包含的JavaScript是responseText的，也就是说，所有申请翻译文本，从而本地化应用。

然而，有没有设置（）在尚未看，所以我们将移动到这个方法。我们要开始创建一个日期选择器，这将改变的基础上选择的语言。

设置： 函数（） { 
    创建（“Ext.FormPanel  { 
        renderTo ： '的DateField' ，
        帧 真实，
        标题： “日期选择器” ，
        宽度： 380 ，
        defaultType ： “的DateField' ，
        项目： [{ 
            fieldLabel ： '日期' ，
            名称： '日期' 
        }] 
    }）; 
}

现在，如果你点击日历图标，你会看到每月在指定的语言，以及每一天的第一个字母。

要显示更多的Ext JS的本地化功能，现在我们将创建一个电子邮件领域和每月的浏览器。里面的设置方法，编写以下内容：

分机创建（Ext.FormPanel'  { 
    renderTo ： 'emailfield' ，
    labelWidth ： 100 ，
    帧 真实，
    标题： “电子邮件    
         
    


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: 'pagingmemory',
         data: monthArray,
         reader: {
             type: 'array'
         }
     }
 });

分机。创建（“Ext.grid.Panel” ， { 
    renderTo ： '格' ，
    宽度： 380 ，
    高度： 203 ，
    标题：“月浏览器” ，
    列：[{ 
        文字： “月   
        
    

触发数据存储的负载
DS 。加载（）;