PDA

View Full Version : Localization in Sench Touch



Buckeye
9 Feb 2011, 10:17 AM
Hello,

I found out this tutorial for Ext.JS localization:

http://www.sencha.com/learn/Tutorial:Localizing_Ext

But I could not apply it to Sencha Touch since there is no locale file anywhere in Sencha Touch package.

I copied locale files from Ext.JS to Sencha folder:

senchatouch\src\locale

Then include the locale file (For example: German locale file ext-lang-de.js to the header). Then implemented a simple Date Picker to check. Nothing is changed still default English. I tried Ext.JS, the Date Picker did change to German version although the UI is different from Sencha Touch Date Picker.

Could anyone give a hint how to make theis localization work in Sencha Touch?

Thank you!

Buck

Buckeye
10 Feb 2011, 11:59 AM
I think I need to clarify my question here:

I can do my own control label translation no problem, but cannot translate Sencha native controls like Date Picker.

Can anyone give me a hand?

Thanks!

addeadde
4 Mar 2011, 12:27 AM
Do you have any news on this or how did you solve the problem? I read in the release notes from 0.92 that support for localization were added to the library but I don't understand in what way.

Buckeye
9 Mar 2011, 8:14 AM
Basically you have to do the translation yourself as following:



Date.dayNames = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
];

Date.monthNames = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
];

Date.monthNumbers = {
'Jan': 0,
'Feb': 1,
'Mar': 2,
'Apr': 3,
'May': 4,
'Jun': 5,
'Jul': 6,
'Aug': 7,
'Sep': 8,
'Oct': 9,
'Nov': 10,
'Dec': 11
};

Date.getShortMonthName = function(month) {
return Date.monthNames[month].substring(0, 3); };

Date.getShortDayName = function(day) {
return Date.dayNames[day].substring(0, 3); };

Date.getMonthNumber = function(name) {
return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()]; };

Date.parseCodes.S.s = '(?:st|nd|rd|th)';

if(Ext.Picker){
Ext.override(Ext.Picker, {
doneText: 'Done'
});
}

if(Ext.DatePicker){
Ext.override(Ext.DatePicker, {
'dayText': 'Day',
'monthText': 'Month',
'yearText': 'Year',
'slotOrder': ['month', 'day', 'year']
});
}

if(Ext.IndexBar){
Ext.override(Ext.IndexBar, {
'letters': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
});
}

if(Ext.NestedList){
Ext.override(Ext.NestedList, {
'backText': 'Back',
'loadingText': 'Loading...',
'emptyText': 'No items available.'
});
}

if(Ext.util.Format){
Ext.util.Format.defaultDateFormat = 'm/d/Y'; }

if(Ext.MessageBox){
Ext.MessageBox.OK.text = 'OK';
Ext.MessageBox.CANCEL.text = 'Cancel';
Ext.MessageBox.YES.text = 'Yes';
Ext.MessageBox.NO.text = 'No';
}

heringsfilet
4 Apr 2011, 1:11 AM
This works great, thanks for the hint :)
Just a note: it's "doneButton" for the picker in the current version (1.1.0) and not "doneText".

Another problem with localization in sencha touch and the DatePicker is the "cancel" button. There is a property for the "doneButton" but no possibility to change the "cancelText" or did I miss something?

ddr
18 Apr 2011, 5:59 AM
This works great, thanks for the hint :)
Just a note: it's "doneButton" for the picker in the current version (1.1.0) and not "doneText".

Another problem with localization in sencha touch and the DatePicker is the "cancel" button. There is a property for the "doneButton" but no possibility to change the "cancelText" or did I miss something?

try this: "cancelButton"

hudibm
27 Apr 2011, 3:46 AM
I can do my own control label translation no problem

Hi,Can you please give me an example of how you do the above('own control label translation')
using the different language files(ext-lang-de.js,ext-lang-fa.js etc...)
thank you!!

hudibm
27 Apr 2011, 3:53 AM
I can do my own control label translation no problem

Hi,Can you please give me an example of how you do the above('own control label translation')
using the different language files(ext-lang-de.js,ext-lang-fa.js etc...)
thank you!!

grman
27 Jun 2011, 6:10 AM
Can you provide us a localization example in sencha touch

grman
27 Jun 2011, 6:12 AM
provide us an example of label translation in sencha touch please
thank you in advance

gakaki
28 Aug 2011, 9:17 PM
Ext.override(Ext.picker,{
'doneButton':'quewqeqewqewqewqeqwewqe',
'cancelButton':'canceladsfadsfafadsffads'

})

ujjwal_kumar_roy
18 Apr 2012, 8:08 AM
Actually i want to make an application where an external jq date picker is to be insert in sencha touch. but i can't do it. can any one help me.

tine_m
2 Jul 2012, 5:43 AM
Hi!

I was searching for that topic (for SENCHA TOUCH 2) on the internets for hours without any luck.. I wondered how to apply the JS file found in /src/locale/ to the sencha app, but whatever I did, the DatePicker did not get localized.


Finnaly I found a solution, and maybe this will save some time to someone....
again, this is solution for SENCHA TOUCH 2.0!

1. I edited and translated the file /src/locale/ext-lang-en.js. I noticed that in this file, there was still depricated function "Ext.override" so that has to be fixed. And "Date" should be replaced with "Ext.Date". Also I put the whole script into a function in Ext.onReady event. Here is my final file (translated for Slovenian locale, but you will get the point...):

Ext.onReady(function() {
Ext.Date.dayNames = [
'Nedelja',
'Ponedeljek',
'Torek',
'Sreda',
'?etrtek',
'Petek',
'Sobota'
];


Ext.Date.monthNames = [
'Januar',
'Februar',
'Marc',
'April',
'Maj',
'Junij',
'Julij',
'Avgust',
'September',
'Oktober',
'November',
'December'
];


Ext.Date.monthNumbers = {
'Jan': 0,
'Feb': 1,
'Mar': 2,
'Apr': 3,
'Maj': 4,
'Jun': 5,
'Jul': 6,
'Avg': 7,
'Sep': 8,
'Okt': 9,
'Nov': 10,
'Dec': 11
};


Ext.Date.getShortMonthName = function(month) {
return Date.monthNames[month].substring(0, 3);
};


Ext.Date.getShortDayName = function(day) {
return Date.dayNames[day].substring(0, 3);
};


Ext.Date.getMonthNumber = function(name) {
return Date.monthNumbers[name.substring(0, 1).toUpperCase() + name.substring(1, 3).toLowerCase()];
};


Ext.Date.parseCodes.S.s = '(?:st|nd|rd|th)';


if (Ext.picker.Picker){
Ext.define('Ext.picker.Picker', {
override: 'Ext.picker.Picker',
config:{
doneButton: 'Izberi' ,
cancelButton: 'Prekli?i'
}
});
}


if (Ext.picker.Date) {
//debugger;

Ext.define('Ext.picker.Date', {
override: 'Ext.picker.Date',
config:{
doneButton: 'Izberi' ,
cancelButton: 'Prekli?i',
dayText: 'Dan',
monthText: 'Mesec',
yearText: 'Leto',
slotOrder: ['day', 'month', 'year']
}
});
}


if(Ext.IndexBar){
Ext.define('Ext.IndexBar', {
override: 'Ext.IndexBar',
config:
{
letters: ['A', 'B', 'C', '?', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', '', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '']
}
});
}


if(Ext.NestedList){
Ext.define('Ext.NestedList', {
override: 'Ext.NestedList',
config:{
backText: 'Nazaj',
loadingText: 'Nalagam...',
emptyText: 'Ni podatkov za prikaz'
}
});
}


if(Ext.util.Format){
Ext.util.Format.defaultDateFormat = 'd.m.Y';
}


if(Ext.MessageBox){
Ext.MessageBox.OK.text = 'V redu';
Ext.MessageBox.CANCEL.text = 'Prekli?i';
Ext.MessageBox.YES.text = 'Da';
Ext.MessageBox.NO.text = 'Ne';
}
});


2.) I saved the file to <app_dir>/locale/ext-lang-si.js. In my index.html I added the line AFTER app.js script and that was it.

<script type="text/javascript" src="/sencha-touch-2.0.1.1/sencha-touch-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="locale/ext-lang-si.js"></script>


Hopefully someone will find this useful.

P.S.: I have probably misplaced this thread, but this is where google directed me most of the times, and I believe that so will do for others... sorry for inconvenience.

GillesK
14 Aug 2012, 12:37 PM
Hello,

I have tried tine_m solution but my sencha touch 2.0 (2.0.1.1) is slightly different since I dont have
any reference to app.js in the index.html and I load microloader/development.js.
The solution does not work for me :(

Any Clue ?

tine_m
15 Aug 2012, 10:54 PM
If you use microloader, then make sure that you put localization script (for example "locale/ext-lang-si.js") into your app.json like this:


{
...
"js": [
{
"path": "sdk/sencha-touch.js"
},

{
"path": "app.js",
"bundle": true,
"update": "delta"
},
{
"path": "locale/ext-lang-si.js",
"update": "delta"
}
],
....
/**
* Extra resources to be copied along when build
*/
"resources": [
"img",
"css",
"locale",

],
}



I hope that helps.

novadys-sbu
12 Jul 2016, 4:52 AM
This worked for me in ST 2.1 too, so thanks ! :)