Ext.js - Localisation
Il est toujours préférable de communiquer avec les utilisateurs dans la langue qu'ils comprennent et préfèrent. Le package de localisation Extjs prend en charge plus de 40 langues telles que l'allemand, le français, le coréen, le chinois, etc. Il est très simple d'implémenter les paramètres régionaux dans ExtJs. Vous trouverez tous les fichiers de paramètres régionaux fournis dans le dossier override du package ext-locale. Les fichiers de paramètres régionaux remplacent simplement ce qui indique à Ext JS de remplacer les valeurs anglaises par défaut de certains composants.
Le programme suivant est d'afficher le mois dans différents paramètres régionaux pour voir l'effet. Essayez le programme suivant.
<!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>Le programme ci-dessus produira le résultat suivant
Pour utiliser des paramètres régionaux différents de l'anglais, nous aurions besoin d'ajouter le fichier spécifique aux paramètres régionaux dans notre programme. Ici, nous utilisons https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localefr.js pour le français. Vous pouvez utiliser différents paramètres régionaux pour différentes langues telles que https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js pour le coréen, etc.
Le programme suivant consiste à afficher le sélecteur de date dans les paramètres régionaux coréens pour voir l'effet. Essayez le programme suivant.
<!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>Le programme ci-dessus produira le résultat suivant -
Le tableau suivant répertorie les quelques paramètres régionaux disponibles dans ExtJS et l'URL de paramètres régionaux du fichier principal à modifier.
| Lieu | Langue | URL des paramètres régionaux |
|---|---|---|
| ko | coréen | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ko.js |
| fr | français | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-fa.js |
| es | Espagnol | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-es.js |
| ja | Japonais | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ja.js |
| il | italien | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-it.js |
| ru | russe | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/locale-ru.js |
| zh_CN | Simplifie le chinois | https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/locale/localezh_CN.js |