Extjs 4 Multilanguage

[Cougar84]

Hi, i'm trying to develop a multi language application in Extjs 4 and I haven't found yet a good solution to change labels & messages in js file.

Have you found a good solution to make Extjs 4 multi language?

Thanks
Marco

[burnnat]

Have you read the ExtJS localization guide?

[Cougar84]

No ... thank you!!!

[Cougar84]

Thats works with messages and date stuff, but for my labels or my messages in the js files?

In the guide there is:

setup: function() {
    Ext.create('Ext.FormPanel', {
        renderTo: 'datefield',
        frame: true,
        title: 'Date picker',
        width: 380,
        defaultType: 'datefield',
        items: [{
            fieldLabel: 'Date',
            name: 'date'
        }]
    });
}

That works perfectly with Extjs widgets but not for my labels ...

Let me explain:
I want to change the title property like:

 
setup: function() {
    Ext.create('Ext.FormPanel', {
        renderTo: 'datefield',
        frame: true,
        title: getLabel("DatePicker"),
        width: 380,
        defaultType: 'datefield',
        items: [{
            fieldLabel: 'Date',
            name: 'date'
        }]
    });
}

where getLabel("DatePicker") returns the right label with the text of the appropriate language ...

[burnnat]

You should be able to follow the same pattern that ExtJS uses:

// Define a class with the labels you want
Ext.define('MyApp.DateForm', {
    extend: 'Ext.form.Panel',
    frame: true,
    title: 'Date Picker',
    defaultType: 'datefield',
    items: [{
        fieldLabel: 'Date',
        name: 'date'
    }]
});

// In your 'LeetSpeak' localization file
if (MyApp.DateForm){
    Ext.apply(MyApp.DateForm, {
        title: "D473 P1(|<3r"
    });
}

// To instantiate
setup: function() {
    Ext.create('MyApp.DateForm', {
        renderTo: 'datefield',
        width: 380
    });
}

[burnnat]

Alternatively, (but not that I'd necessarily recommend this approach) you could store all the labels together:

// Define a class with the labels you want
Ext.define('MyApp.Labels', {
    singleton: true,
    date: 'Date Picker',
    color: 'Color Picker',
    nose: 'Nose Picker'
});

// In your 'LeetSpeak' localization file
if (MyApp.Labels){
    Ext.apply(MyApp.Labels, {
        date: "D473 P1(|<3r",
        color: "(0L0r P1(|<3r",
        nose: "|\|0$3 P1(|<3r"
    });
}

// To instantiate
setup: function() {
    Ext.create('Ext.FormPanel', {
        renderTo: 'datefield',
        frame: true,
        title: MyApp.Labels.date,
        width: 380,
        defaultType: 'datefield',
        items: [{
            fieldLabel: 'Date',
            name: 'date'
        }]
    });
}

[Cougar84]

The last one fit perfectly for me!

Thank you for the fast answer!