<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);
};
|