Ext.js - Lokalisasi
Itu selalu yang terbaik untuk berkomunikasi dengan pengguna dalam bahasa yang mereka pahami dan sukai. Paket pelokalan extjs mendukung lebih dari 40 bahasa seperti Jerman, Perancis, Korea, Cina, dll. Sangat mudah untuk mengimplementasikan lokal di ExtJs. Anda akan menemukan semua file lokal yang dibundel di folder override dari paket ext-locale. File lokal hanya menimpa yang memberi tahu Ext JS untuk mengganti nilai bahasa Inggris default dari komponen tertentu.
Program berikut adalah untuk menunjukkan bulan di lokasi yang berbeda untuk melihat efeknya. Coba program berikut ini.
<!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>Program di atas akan menghasilkan hasil sebagai berikut
Untuk menggunakan bahasa lokal selain bahasa Inggris, kami perlu menambahkan file khusus lokal dalam program kami. Di sini kami menggunakan https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js untuk bahasa Prancis. Anda dapat menggunakan lokal yang berbeda untuk bahasa yang berbeda seperti https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js untuk bahasa Korea, dll.
Program berikut adalah untuk menunjukkan pemilih tanggal dalam bahasa Korea untuk melihat efeknya. Coba program berikut ini.
<!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>Program di atas akan memberikan hasil sebagai berikut -
Tabel berikut mencantumkan beberapa lokal yang tersedia di ExtJS dan URL lokal file utama yang akan diubah.
| Lokal | Bahasa | URL Lokal |
|---|---|---|
| ko | Korea | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | Perancis | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js |
| es | Orang Spanyol | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js |
| ja | Jepang | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js |
| Itu | Italia | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js |
| ru | Rusia | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | Menyederhanakan bahasa Mandarin | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js |