在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的应用程序的一个有用的参考。

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

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请求的文件,那么文件将被上传到服务器,否则他们将无法加载由于浏览器的安全性措施。

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

onFailure处: 函数() 
    { EXT 消息。警报('失败' , '无法加载区域文件“ ); 
    设置(); 
}


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

的onSuccess : (响应) 
    的eval (回应。); 
    设置(); 
}

我们的AJAX调用返回几个参数。我们使用的JavaScript  eval 函数的responseTextresponseText的是整个区域设置文件,加载 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 。加载();

请记住,renderTo对应一个HTML标记的ID,所以添加到我们的索引文件,过于。

请注意,在字段输入时,显示警告图标,当上空盘旋,揭示了作为一个提示母语上下文特定的信息。


超越翻译意味着什么本地化的一个很好的例子可以看出,选择波兰和看到的日期字段变化的DD-MM-YYYY YYYY-MM-DD的顺序如何。另一种是选择芬兰和看到如何代替破折号( - )(。),期间使用单独的一天从每月从今年几个月不大写。这是类似这样的分机,需要照顾你,它的综合性的区域文件的细节。

结论

在本教程中,我们已经看了如何加载使用AJAX请求重新微妙的文化习俗的应用程序所需的语言不同的语言环境包括用Ext JS文件。

你的用户将受益于一个更本土的经验和欣赏额外的长度,你走了,以确保更好的体验。