Ext.js - Lokalisierung
Es ist immer am besten, mit den Benutzern in der Sprache zu kommunizieren, die sie verstehen und bevorzugen. Das Extjs-Lokalisierungspaket unterstützt über 40 Sprachen wie Deutsch, Französisch, Koreanisch, Chinesisch usw. Es ist sehr einfach, das Gebietsschema in ExtJs zu implementieren. Sie finden alle gebündelten Gebietsschemadateien im Überschreibungsordner des ext-Gebietsschemapakets. Gebietsschemadateien überschreiben nur, wodurch Ext JS angewiesen wird, die englischen Standardwerte bestimmter Komponenten zu ersetzen.
Das folgende Programm zeigt den Monat in einem anderen Gebietsschema an, um den Effekt zu sehen. Versuchen Sie das folgende Programm.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fr.js"></script>
<script type = "text/javascript">
Ext.onReady(function() {
var monthArray = Ext.Array.map(Ext.Date.monthNames, function (e) { return [e]; });
var ds = Ext.create('Ext.data.Store', {
fields: ['month'],
remoteSort: true,
pageSize: 6,
proxy: {
type: 'memory',
enablePaging: true,
data: monthArray,
reader: {type: 'array'}
}
});
Ext.create('Ext.grid.Panel', {
renderTo: 'grid',
id : 'gridId',
width: 600,
height: 200,
title:'Month Browser',
columns:[{
text: 'Month of the year',
dataIndex: 'month',
width: 300
}],
store: ds,
bbar: Ext.create('Ext.toolbar.Paging', {
pageSize: 6,
store: ds,
displayInfo: true
})
});
Ext.getCmp('gridId').getStore().load();
});
</script>
</head>
<body>
<div id = "grid" />
</body>
</html>Das obige Programm führt zu folgendem Ergebnis
Um ein anderes Gebietsschema als Englisch zu verwenden, müssten wir die länderspezifische Datei in unser Programm aufnehmen. Hier verwenden wir https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js für Französisch. Sie können unterschiedliche Gebietsschemas für verschiedene Sprachen verwenden, z. B. https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js für Koreanisch usw.
Das folgende Programm zeigt die Datumsauswahl im koreanischen Gebietsschema an, um den Effekt zu sehen. Versuchen Sie das folgende Programm.
<!DOCTYPE html>
<html>
<head>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js"></script>
<script type = "text/javascript">
Ext.onReady(function() {
Ext.create('Ext.picker.Date', {
renderTo: 'datePicker'
});
});
</script>
</head>
<body>
<div id = "datePicker" />
</body>
</html>Das obige Programm führt zu folgendem Ergebnis:
In der folgenden Tabelle sind die wenigen in ExtJS verfügbaren Gebietsschemas und die zu ändernde Gebietsschema-URL der Hauptdatei aufgeführt.
| Gebietsschema | Sprache | Gebietsschema-URL |
|---|---|---|
| ko | Koreanisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | Französisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js |
| es | Spanisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js |
| ja | japanisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js |
| es | Italienisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js |
| ru | Russisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | Vereinfacht Chinesisch | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js |