Internalaization en extjs

Version imprimable

29/05/2012, 11h16
jerada

Internalaization en extjs

Bonjour,

S'il vous plait, j'ai 2 boutons english et french et je veux faire une internalisation.
Ca veut dire quand je clique sur english, tous les button que j'utilise se transforme en anglais et ainsi de suite.

Merci.
30/05/2012, 10h03
Loceka
Citation:

Envoyé par jerada

Internalaization [...] internalisation.

C'est dur à dire n'est-ce pas ?

Après pour faire de l'internationalisation, il faut :
- un moyen d'identifier les éléments ayant besoin d'être internationalisés (par exemple ajouter un ID sur les éléments HTML en question)
- une table permettant de savoir quelle valeur affecter à ces éléments dans les différentes langues (par exemple une table de hashage avec comme clef l'ID de l'élément et comme valeur une autre table de hashage ayant pour clef la langue et pour valeur le texte à mettre dans l'élément)
Une autre solution est de faire une page en anglais et une page en français et de charger l'une ou l'autre selon la langue choisie.
30/05/2012, 14h06
jerada

C'est dur a prononcer a l’écrire et a faire :( svp comment faire la 2 eme solution des pages html
30/05/2012, 14h48
Loceka

Ben faut écrire 2 fois la page HTML, une fois en Français et une fois en Anglais et, selon ce que l'utilisateur choisit (quand il clique sur le bouton donc), afficher la page française ou anglaise.
Rien de bien sorcier.
30/05/2012, 15h01
kenny.kev

Ou tu as ça :
http://dev.sencha.com/deploy/ext-4.0...&charset=utf-8

Extjs à une doc et des exemples très complet je te conseil vivement de t'y référer.
30/05/2012, 21h09
sekaijin
perso tout mes éléments extjs ne contient aucun texte
j'ai un fichier locale par langue crorespondant à chaque composant
ce sont des fichier json
Code:

1 2 3 4 5 { title: "titre de mon panel", saveBt: "enregistrer", ... }
et dans mon composant j'utilise this.locale.title this.locale.saveBt

du coup pour changer de langue j'ai un combo et sur le on change je recharge mon composant avec la nouvelle locale. au passage j'utilise stateMgr pour garder la langue choisie.

je systeme de langue de Extjs est bien foutu et gère bien les nuances ainsi le choix Fr-Fr et Fr-Ca permet d'avoir les text een français (identique ou pas) et les dates et métrique différent les widgets s'adapent bien et finalement je n'y pense plus.

A+JYT.

suite à ton mp
regarde ici
http://dev.sencha.com/deploy/ext-4.1...ulti-lang.html

j'utilise la même méthode.

mais tu as surement remarqué que dans l'exemple les titre des panel des colonnes, les nom de champs ne changent pas
c'est du au fait que ces éléments sont écrit en dur.

Code:

1
2
title: 'Datepicker',
bodyStyle: 'padding:5px 5px 0',

je procède de la même façon sauf que je charge aussi un fichier à moi.
multi-lang-fr-fr.json qui contient du json

Code:

1
2
3
4
{
  datepicker : {title:"slecteur de date",fieldLabel:"date"},
  grid:{title:"navigateur de mois", monthcolumn:"mois"}
}

et dans le code de création des panels j'utilise les élément de mon json

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Datepicker */
  Ext.create('Ext.FormPanel', {
      renderTo: 'datefield',
      labelWidth: 100, // label settings here cascade unless overridden
      frame: true,
      title: this.locale.datepicker.title,
      bodyStyle: 'padding:5px 5px 0',
      width: 380,
      defaults: {
          msgTarget: 'side',
          width: 340
      },
      defaultType: 'datefield',
      items: [{
          fieldLabel: this.locale.datepicker.fieldLabel,
          name: 'date'
      }]
  });

ou encore

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.create('Ext.grid.Panel', {
   renderTo: 'grid',
   width: 380,
   height: 203,
   title: this.locale.grid.title,
   columns:[{
       text: this.locale.grid.monthcolumn,
       dataIndex: 'month',
       width: 240
   }],
   store: ds,
   bbar: Ext.create('Ext.toolbar.Paging', {
           pageSize: 6,
           store: ds,
           displayInfo: true
   })
});

c'est tout.
A+JYT
ps: j'ai trouvé un exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
{
    title: 'Flux : ',
    wait: {
        title : 'Veuillez Patienter',
        msg: 'SVP .....'
    },
    save: 'Enregistrer',
    reset: 'RaZ',
    empty: 'aucune donnée disponible',
    messages: {
        errorTitle: 'Flux : erreur',
        UNAVALABLE: 'le service est actuellement indisponible',
        FORBIDEN: 'Données invalides',
        dataLoaded: 'les donnes ont étées chargées'
    },
    fields: {
        name : 'Nom',
        ident: 'flow.id',
        code: 'Code'
    },
    direction: [
        ['IN',  'Inbound'],
        ['OUT', 'Outbound'],
        ['APP', 'App']
    ],
    editor: {
        update: 'Enregistrer',
        cancel: 'Annuler'
    },
 
    grid: {
        addRecord: 'Ajouter un composant',
        removeRecord: 'Supprimer le composant',
        header: {
            name: 'nom',
            direction: 'direction',
            type: 'site'
 
        }
    }
}

et une des vues qui l'utilise

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
{
    store: this.controller.model.grid.store,
    width: 600,
    region:'center',
    margins: '0 5 5 5',
    autoExpandColumn: 'name',
    plugins: [this.controller.editor],
    view: new Ext.grid.GroupingView({
        markDirty: false
    }),
    tbar: [{
        iconCls: 'user-add',
        text: this.controller.locale.grid.addRecord,
        handler: function(){
            this.controller.fireEvent('add');
        }
    },{
        ref: '../removeBtn',
        iconCls: 'user-delete',
        text: this.controller.locale.grid.removeRecord,
        disabled: true,
        handler: function(){
            this.controller.fireEvent('remove');
        }
    }],
 
    columns: [
    new Ext.grid.RowNumberer(),
    {
        id: 'name',
        header: this.controller.locale.grid.header.name,
        dataIndex: 'cmp_name',
        width: 250,
        sortable: true,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    },{
        header: this.controller.locale.grid.header.direction,
        dataIndex: 'cmp_dir',
        width: 50,
        sortable: true,
        editor: {
            xtype: 'combo',
            store: new Ext.data.SimpleStore({
                fields: ['value', 'label'],
                data : this.controller.locale.direction
            }),
            displayField: 'label',
            valueField: 'value',
            allowBlank: false,
            //typeAhead: false,
            //editable:false,
            mode: 'local',
            forceSelection: true,
            triggerAction: 'all'
        }
    },{
        header: this.controller.locale.grid.header.type,
        dataIndex: 'site_id',
        width: 100,
        sortable: true,
        renderer: function(value, metaData, record, rowIndex, colIndex, store) {
            return record.data.site_code;
        },
        editor: {
            xtype: 'combo',
            store: this.controller.model.site,
            displayField: 'label',
            valueField: 'value',
            allowBlank: true,
            //typeAhead: false,
            //editable:false,
            mode: 'local',
            forceSelection: true,
            triggerAction: 'all'
        }
    }]
}