Ext.js - Yerelleştirme
Kullanıcılarla anladıkları ve tercih ettikleri dilde iletişim kurmak her zaman en iyisidir. Extjs yerelleştirme paketi Almanca, Fransızca, Korece, Çince vb. Gibi 40'tan fazla dili destekler. Yerel ayarı ExtJ'lerde uygulamak çok basittir. Paketlenmiş tüm yerel dosyaları, ext-locale paketinin geçersiz kılma klasöründe bulacaksınız. Yerel ayar dosyaları, Ext JS'ye belirli bileşenlerin varsayılan İngilizce değerlerini değiştirmesini söyleyen geçersiz kılar.
Aşağıdaki program, etkisini görmek için ayı farklı yerel ayarda göstermektir. Aşağıdaki programı deneyin.
<!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>Yukarıdaki program aşağıdaki sonucu verecektir
İngilizce dışında farklı bir yerel ayar kullanmak için, yerel ayara özgü dosyayı programımıza eklememiz gerekir. Burada Fransızca için https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js kullanıyoruz. Korece için https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js gibi farklı diller için farklı yerel ayarlar kullanabilirsiniz.
Aşağıdaki program, etkiyi görmek için tarih seçiciyi Kore yerel ayarında göstermektir. Aşağıdaki programı deneyin.
<!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>Yukarıdaki program aşağıdaki sonucu verecektir -
Aşağıdaki tablo, ExtJS'de bulunan birkaç yerel ayarı ve değiştirilecek ana dosya yerel ayarı URL'sini listeler.
| Yerel | Dil | Yerel URL |
|---|---|---|
| ko | Koreli | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | Fransızca | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js |
| es | İspanyol | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js |
| ja | Japonca | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js |
| o | İtalyan | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js |
| ru | Rusça | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | Çince'yi basitleştirir | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js |