Sencha Ext JS 国际化和本地化Word格式文档下载.docx

1、My english title）;这样,应用程序的任何地方都能访问译文了,怎样访问呢?就像打字一样简单:Jnesis.Labels.button 或 Jnesis.Labels.title 这样做比”重写”类的方法优点在于本地化的值在一个文件里且容易使用,因为像上面看到的那样,每个元素是一个变量.一旦做到这一点,我们选择其他语言后只需要”重写”覆盖这个语言文件.有两个步骤:1. 从web服务加载数据,服务器响应回的JSON看起来像这样: button:Mon BoutontitleMon titre我们需要解析数据并用解析到的值覆盖我们默认的本地化单例类:Ext.define （Jnesis

2、.Application launch: function （） Ext.Ajax.request（ url:get-localization params:locale:fr, callback: function （options, success, response） var data = Ext.decode（response.responseText, true）; Ext.override（Jnesis.Labels, data）; Ext.create（Jnesis.view.main.Main）; ）;加载重写的Ext JS类:Jnesis.locale.fr.Labels o

3、verride:Mon BoutonMon titre然后用Ext.Loader.loadscript 方法处理它,当它完成后加载我们的主视图: var lang = url = resources/locale/+lang+/Labels.js; Ext.Loader.loadScript（ url, onLoad: function （options） 然后，我们希望通过在component基类里定义一个新的属性（例如:”localized”）,使用我们擅长的原生继承机制获取到翻译类属性.这个属性可以是由键,值组成的简单JavaScript对象（记住上面的Jnesis.Labels.but

4、ton 和 Jnesis.Labels.title）.用定义键的字符串,就可以获取到对象的值: extend:Ext.panel.Panel localized: Jnesis.Labels.title , buttons: text:Jnesis.Labels.button handler:onClickButton 一旦做到这一点,我们只需要重写”initComponent”的基类方法并将键的字符串转换为对象的值,那么我们就可以在任意Ext JS组件里使用了:overrides.localized.ComponentExt.Component initComponent: function

5、（） var me = this, localized = me.localized, value; if （Ext.isObject（localized） for （var prop in localized） value = localizedprop; if （value） meprop = eval（value）; me.callParent（arguments）;此解决方案以透明的方式在任何层级的组件声明（Container 配置或 item 配置）正常运行.我的解决方案综合官方方案、Saki博客和Sencha论坛网友提供的方法,再根据自身项目的修改,形成自己的解决方案.项目介绍前端

6、全部采用Ext Js开发的单页面Desktop应用程序,也就是使用了Ext Js里的Desktop组件加以修改.使用Sencha Cmd进行构建.后端采用Java spring MVC修改需求:现需要将中文版加入英文版功能,并且可以随浏览器语言来识别显示中文版还是英文版,并且可以由用户自行修改语言,并记住语言.需求分析:其实就是要做国际化和本地化,但后端和前端都有需要做国际化地方,所以统一由server端管理获取语言:当打开应用时浏览器通过js查询本地cookie并获取,设置语言:当用户点击指定语言,发送请求到server修改cookies里的语言并响应回由浏览器接收显示server端国际化由

7、spring mvc完成前端国际化分为两部分A. 为项目内容的国际化,如产品,客户,用户登录等.B. 为Ext JS自身组件的国际化,例如必填字段提示文字,grid列头选择标题字等.实现A的方案要想实现A,参考官方的方案即可,且可以做到无刷新更换语言.因为官方的方案是只写了一个类,另一种语言需要从后端请求JSON覆盖JS类的方法来实现,不够统一,我将其修改为以下方法:定义一个单例的翻译类Locale,加入了多语言属性:VSMS.Locale lang:zh_CN username: zh_CN:用户名 en:Username inputusername:输入用户名Input username

8、login:登录Login forgotpassword:忘记密码Forgot password logout:注销Logout Dywexit:确定要退出吗?Exit? password:密码Password inputpassword:输入密码Input password checkcode:验证码Check code changeone:换一张Change autologin:自动登录Auto login）Application初始化时初始化VSMS.Locale.lang:VSMS.ApplicationExt.app.Application name:VSMS stores: / T

9、ODO: add global / shared stores here , /获取cookie 本地化语言 var lang = Ext.util.Cookies.get（lang if（!lang） lang = VSMS.Locale.lang = lang;在Sencha Cmd项目里的overrides新建目录localized,并重写Component的initComponent方法: meprop = eval（value）VSMS.Locale.lang;/根据不同语言来获取不同属性的值在view上使用localized属性包住需要翻译的属性,完整的view太长,下面显示了一个

10、片段:items: xtype:textfieldusername fieldLabel:VSMS.Locale.username, /用户名 emptyText:VSMS.Locale.inputusername /输入用户名 fieldCls:logininput beforeBodyEl:/i enableKeyEvents: true那么在viewController里如何使用翻译属性呢?参照下面的写法:VSMS.Locale.changeoneVSMS.Locale.lang到现在,所有A部分的国际化完成了.实现B的方案我们知道,在用Sencha Cmd构建不同语言应用程序时需要在项

11、目根目录的app.json指定:requiresext-locale localeszh_CN注意: locales不要写成locale了,我因为写错了导致找了很久_可是在构建时locales只能构建一个语言.如果能构建多个语言,并通过一个”index.html”进行选择加载就能实现B的国际化了.思路如下图:下面是实现方法修改Sencha Cmd项目根目录下app.json的以下属性:enbuildscrispthemeext-theme-crispbootstrapbase$app.dirmanifest$build.id.jsonmicroloaderbootstrap.jscssboot

12、strap.cssoutput$workspace.build.dir/$build.environment/$app.name/$build.idpage./index.html./$build.id.jsondeltasenable falsecachejsoptimizecallParentcssPrefixdefines修改build.xml文件如下:?xml version=1.0 encoding=utf-8project name=$app.name default=.help import file=$basedir/.sencha/app/build-impl.xml/ Th

13、e following targets can be provided to inject logic before and/or after key steps of the build process: The init-local target is used to initialize properties that may be personalized for the local machine.target name=-before-init-local-after-init-localclean target is used to clean build output from

14、 the build.dir.-before-clean-after-clean The general init target is used to initialize all other properties, including those provided by Sencha Cmd.-before-init-after-init target performs the call to Sencha Cmd to build the all-classes.js file.-before-page-after-pagebuild target performs the call to

15、 Sencha Cmd to build the application.-before-build-after-buildmacrodef name=x-run-buildattribute name=targetlocalebuildNamethemebuildIdtheme-localesequentialifequals arg1=locale arg2=thenant dir=$basedir inheritall=false inheritrefs=true target=targetproperty name=compiler.ref.id value=$compiler.ref

16、.id-themeapp.themeext-theme-themeapp.build.dir.suffixcmd.dir$cmd.dirbuild.environment$build.environmentpression.yui$pression.yuibuild.idbuildIdbuild.namebuildName/ant/thenelse$compiler.ref.id-theme-localeapp.localeext-theme-theme-locale/else/if/sequential/macrodefbuild-all depends=build-crisp,build-crisp-touch-init,build-all- Build -build-crispechoBuild $app.name - Crisp Themex-run-build theme=app-build-impl.build/targettarget