Ext JS 4.1 多国语言加载方案的改进

来源：互联网发布：大数据平台运维文档编辑：程序博客网时间：2024/04/28 02:44

经过测试发现Ext JS4.1自带的多国语言方式存在以下问题：

加载不稳定
加载方式为将文件加载写入<head>中，没有采用更为灵活的动态加载
onReady加载，不灵活
Chrome显示存在问题，FF正常

改进的地方如下：

加载资源文件改用动态加载
资源文件的编写除了使用类重写的方式，还可以使用全局变量的方式，使用更加灵活
多浏览器兼容解决，IE需要9+版本

代码分类展示如下：

某组件代码

Ext.define('ZI.myclass.v.MyPanel', {extend : 'Ext.panel.Panel',title : ZI.i18n.PanelTitle,//i18nwidth : 200,height : 50,items : [ Ext.create('ZI.myclass.v.Bt') ]});

zh_CN的资源代码片段

//用于定义一个用于提供构造方法的类注意其命名方式Ext.define('ZI.i18n.msg_zh_CN', {});// 官方推荐的多国语言方法 兼容性不好// 自定义多国语言动态加载方法Ext.ns('ZI.i18n');ZI.i18n.PanelTitle = '早上好';ZI.i18n.BtText = '按钮';// 官方拷贝////////////////////////////////////var cm = Ext.ClassManager, exists = Ext.Function.bind(cm.get, cm), parseCodes;if (Ext.Updater) {Ext.Updater.defaults.indicatorText = '<div class="loading-indicator">加载中...</div>';}Ext.define("Ext.locale.zh_CN.view.View", {override : "Ext.view.View",emptyText : ""});

languages.js

Ext.namespace('ZI');ZI.Languages = [ [ 'en', 'English' ], [ 'ja', 'Japanese' ],[ 'zh_CN', 'Simplified Chinese' ] ];

运行代码

//兼容性设置 调试用var console = console || null;if (!console) {var names = [ "log", "debug", "info", "warn", "error", "assert", "dir","dirxml", "group", "groupEnd", "time", "timeEnd", "count", "trace","profile", "profileEnd" ];window.console = {};for ( var i = 0; i < names.length; ++i)window.console[names[i]] = function() {};}// 创建一个命名空间Ext.ns('ZI');// 加载命名空间Ext.Loader.setConfig({enabled : true,paths : {ZI : 'application'// 系统js文件路径}});// 此种加载必须采用根层次才正常?Ext.require('ZI.Languages');ZI.DefaultLanguage = "zh_CN";console.log('begin');Ext.onReady(function() {// 获取url中的语言设置var params = Ext.urlDecode(window.location.search.substring(1));console.log('onReady');// 增加tip功能Ext.QuickTips.init();// 状态管理Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));/* Language chooser combobox */var store = Ext.create('Ext.data.ArrayStore', {fields : [ 'code', 'language', 'charset' ],data : ZI.Languages});var combo = Ext.create('Ext.form.field.ComboBox', {// renderTo : 'languages',store : store,displayField : 'language',queryMode : 'local',emptyText : 'Select a language...',hideLabel : true,listeners : {select : {fn : function(cb, records) {var record = records[0];window.location.search = Ext.urlEncode({"lang" : record.get("code")});},scope : this}}});// 设置语言的下拉菜单值if (params.lang) {var record = store.findRecord('code', params.lang, null, null, null,true);if (record) {combo.setValue(record.data.language);}}// 启动应用Ext.application({launch : function() {// 多国语言文件载入必须先于所有UI组件的加载var lang = params.lang;if (lang) {// 不修改} else {lang = ZI.DefaultLanguage;}// 官方方法由于兼容性不好废除// 自定义动态加载方法var record = store.findRecord('code', lang, null, null,null, true), url = Ext.util.Format.format("ZI.i18n.msg_{0}", lang);// 要求有站位类Ext.create(url);// 创建UIvar mp = Ext.create('ZI.myclass.v.MyPanel');console.log(mp);var dp = Ext.create('Ext.picker.Date', {minDate : new Date(),handler : function(picker, date) {console.log(date);}});Ext.create('Ext.container.Viewport', {layout : {type : "vbox",align : 'center',defaultMargins : 10},items : [ combo, mp, dp ]});}});});

~the end~