PDA

View Full Version : Extjs 4 Multilanguage



Cougar84
9 Nov 2011, 6:39 AM
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
9 Nov 2011, 6:48 AM
Have you read the ExtJS localization guide (http://docs.sencha.com/ext-js/4-0/#!/guide/localization)?

Cougar84
9 Nov 2011, 7:07 AM
No ... thank you!!!

Cougar84
9 Nov 2011, 7:30 AM
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
9 Nov 2011, 7:45 AM
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
9 Nov 2011, 7:53 AM
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
10 Nov 2011, 1:22 AM
The last one fit perfectly for me!

Thank you for the fast answer!