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

最新推荐文章于 2019-12-27 16:21:53 发布

shadowkiss

最新推荐文章于 2019-12-27 16:21:53 发布

阅读量2.8k

点赞数

分类专栏：编程技术文章标签：语言 ext function null date application

本文链接：https://blog.csdn.net/shadowkiss/article/details/7572396

版权

编程技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

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

改进的地方如下：

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

代码分类展示如下：

某组件代码

Ext.define('ZI.myclass.v.MyPanel', {
	extend : 'Ext.panel.Panel',
	title : ZI.i18n.PanelTitle,//i18n
	width : 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);

					// 创建UI
					var 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~

shadowkiss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext JS 4.1 多国语言加载方案的改进

经过测试发现Ext JS4.1自带的多国语言方式存在以下问题：加载不稳定加载方式为将文件加载写入中，没有采用更为灵活的动态加载onReady加载，不灵活Chrome显示存在问题，FF正常改进的地方如下：加载资源文件改用动态加载资源文件的编写除了使用类重写的方式，还可以使用全局变量的方式，使用更加灵活多浏览器兼容解决，IE需要9+版本代码分类展示如下：某组
复制链接

扫一扫

专栏目录