10.3 本地化Ext（2）

来源：互联网发布：音乐家知乎编辑：程序博客网时间：2024/05/24 02:37

10.3 本地化Ext（2）

下面是实现本地化功能示例的全部源代码。

HTML代码清单10-3-1

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title id="title">本地化例子</title>

<link rel="stylesheet" type="text/css" 

href="../../resources/css/ext-all.css">

<script type="text/javascript" src="../../adapter/ext/ext-base.js">

</script>

<script type="text/javascript" src="../../ext-all-debug.js">

</script>

<script type="text/javascript" src="../locale/PagingMemoryProxy.js">

</script>

<!-- Ext localization javascript -->

<script type="text/javascript" id="extlocale">

</script>

<script type="text/javascript">

// decode language passed in url

var locale = window.location.search ? 

Ext.urlDecode(window.location.search.substring(1)).locale : '';

var head = Ext.fly(document.getElementsByTagName('head')[0]);

if (locale) {

Ext.fly('extlocale').set({

src: '../../source/locale/ext-lang-' + locale + '.js'

});

}

</script>

<script type="text/javascript" id="applocale">

</script>

<script type="text/javascript" src="importScript.js">

</script>

<!-- Main application -->

<script type="text/javascript">

var grid;

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.QuickTips.init();

Ext.form.Field.prototype.msgTarget = 'side';

/**************************************************************/

var fm = Ext.form, Ed = Ext.grid.GridEditor;

var monthArray = Date.monthNames.map(function(e){

return [e];

});

var ds = new Ext.data.Store({

proxy: new Ext.data.PagingMemoryProxy(monthArray),

reader: new Ext.data.ArrayReader({}, [{

name: 'month'

}])

});

var cm = new Ext.grid.ColumnModel([{

header: "Months of the year",

id: 'monthID',

dataIndex: 'month',

editor: new Ed(new fm.TextField({

allowBlank: false

})),

width: 240

}]);

cm.defaultSortable = true;

grid = new Ext.grid.GridPanel({

//frame:true,

width: 475,

height: 215,

title: 'Month Browser',

store: ds,

cm: cm,

sm: new Ext.grid.RowSelectionModel({

selectRow: Ext.emptyFn

}),

bbar: new Ext.PagingToolbar({

pageSize: 6,

store: ds,

displayInfo: true

})

});

// trigger the data store load

ds.load({

params: {

start: 0,

limit: 6

}

});

/**************************************************************/

// create pre-configured example window extension class

Ext.ns('Tutorial');

Tutorial.LocalizationWin = Ext.extend(Ext.Window, {

titleText: 'Localization Example',

selectLangText: 'Select Language',

textFieldText: 'Text Field',

dateFieldText: 'Date Field',

monthText: 'Month Localizing..',

initComponent: function(){

Ext.apply(this, {

width: 500,

id: 'winid',

height: 350,

layout: 'fit',

border: false,

closable: false,

title: this.titleText,

items: [{

xtype: 'form',

frame: true,

defaultType: 'textfield',

items: [{

xtype: 'combo',

fieldLabel: this.selectLangText,

name: 'locale',

store: new Ext.data.SimpleStore({

id: 0,

fields: ['file', 'locale'],

data: [['', 'English'], ['zh_CN', 'Chinese'], 

['ja', 'Japanese']]

}),

listeners: {

select: {

fn: function(combo){

window.location.search = '?' +

Ext.urlEncode({

locale: combo.getValue()

});

}

}

},

mode: 'local',

editable: false,

forceSelection: true,

valueField: 'file',

displayField: 'locale',

triggerAction: 'all',

value: locale

}, {

fieldLabel: this.textFieldText,

allowBlank: false

}, {

xtype: 'datefield',

fieldLabel: this.dateFieldText,

allowBlank: false

}, {

xtype: 'label',

text: this.monthText,

style: 'top:200px'

}, grid]

}]

});

Tutorial.LocalizationWin.superclass.initComponent

.apply (this, arguments);

}

});

function callback(){

appMain();

}

if (locale) {

importScript('app-lang-' + locale + '.js', callback);

}

else {

appMain();

}

function appMain(){

var win = new Tutorial.LocalizationWin();

win.show();

}

});

</script>

</head>

<body>

</body>

</html>

JavaScript代码清单10-3-2 (app-lang-zh_CN.js)

/**

* 简体中文的本地化文件

*/

if(Tutorial.LocalizationWin) {

Ext.override(Tutorial.LocalizationWin, {

titleText:'本地化 示例'

,selectLangText:'选择语言'

,textFieldText:'文本 字段'

,dateFieldText:'日期 字段'

,monthText:'本地化月份..'

});

}

grid.setTitle('月份浏览');

grid.getColumnModel().getColumnById('monthID').header='一年的月份';

JavaScript代码清单10-3-3 (app-lang-ja.js)

/**

* 日文的本地化文件

*/

if(Tutorial.LocalizationWin) {

Ext.override(Tutorial.LocalizationWin, {

titleText:'ローカル化サンプル'

,selectLangText:'言語'

,textFieldText:'テキスト'

,dateFieldText:'日付'

,monthText:'ローカル化月..'

});

}

grid.setTitle('月プレビュー');

grid.getColumnModel().getColumnById('monthID').header='月';

JavaScript代码清单10-3-4 (importScript.js)

/*

导入相应的语言资源文件，并执行回调函数

*/

function importScript(src, callback){

var script = document.createElement("script");

if (script.addEventListener) 

script.addEventListener("load", callback, false);

else 

if (script.attachEvent) 

script.attachEvent("onreadystatechange", function(){

importScript.callbackForIE(callback);

});

script.src = src;

document.getElementsByTagName("head")[0].appendChild(script);

}

importScript.callbackForIE = function(callback){

var target = window.event.srcElement;

if (target.readyState == "loaded" || target.readyState == "complete") 

callback.call(target);

};

在上面的Ext本地化示例中的过程如下。

(1) 浏览器向服务端请求页面文件。

(2) 服务端返回后页面文件在浏览器中解析时，首先会判断请求的url中是否包含local字符串，即本地编码：

如果不包含，那么会使用Ext默认的英文本地化文件进行载入。

如果包含，比如local=zh_CN或者local=ja，那么会根据此编码值拼接成Ext本地化包中相应的本地化文件名称，并且通过Ext.fly方法设置ID为extlocal的script标签的src的值为Ext内置的本地化文件，此时浏览器会载入此文件。

(3) 接着创建了一个Grid组件，此组件从浏览器载入的Ext内置本地化文件中的Date.monthNames数组中读取数据，可见上文中见到的local编码值的重要性，载入不同的本地化文件，Date.monthNames的值将会不同，那么Grid组件的内容也会发生变化。

(4) 然后继续创建了一个窗口组件，窗口中包含选择语言编码的列表，文本字段输入域，日期字段输入域，并包含了上面创建的Grid组件。

读者应该可以看到代码中，Tutorial.LocalizationWin继承了Ext.Window组件类，并新增了自己的配置属性，即文本字段、日期字段、窗体Title等的显示文本。在初始化这些组件的时候，引用了外部的显示文本如textFieldText，这样，就创建出了一套优雅的国际化代码，为后面的本地化实现打下了基础。

接下来的是以下这段代码：

if(locale) {

importScript('app-lang-' + locale + '.js', callback);

}