PDA

View Full Version : How does Localization work in Ext ?



ksachdeva
4 Jul 2007, 10:31 AM
Hi Guys,

After reading the localization example it seems like you have to include the localized version of javascript in your page but I was expecting that depending on browser (language) settings the appropriate javascript (data file) would be fetched. Is there some mechanism like this ?

Please guide about the localization capabilities of Ext JS

Regards & thanks
Kapil

BernardChhun
4 Jul 2007, 10:51 AM
I haven't tried those Ext localization file yet but here's my workaround for this common problem.

we make a global variable that contains various labels used in the app :

the english file (local-en.js) would look like this:

var localization = {
labels : {"btn" : "button"}
, messages : {"error" : "error!"}
, "foo" : "bar"
}

and here's the french (local-fr.js) one:

var localization = {
labels : {"btn" : "bouton"}
, messages : {"error" : "erreur!"}
, "foo" : "bar"
}

and here's a small function to have access to those localized values :


function _(str, section) {
if (section){
if (localization[section][str]){ str = localization[section][str]; return str;}
}
if (localization[str]){str = localization[str]};
return str;
}

so if I want to get to the btn label value i'd do this :


var btnLabel = _("btn", "labels");

the tricky part is inserting the file at load time depending on the browser language:
here's the function that does it:

function checkLocal(){
var lang = navigator.language!=null ? navigator.language : navigator.browserLanguage;
var head = document.getElementsByTagName("head")[0];
var script = document.createElement('script');
script.id = 'localScript';
script.type = 'text/javascript';
if (lang.indexOf("fr") != -1){
script.src = "local/local-fr.js";
}else{
script.src = "local/local-en.js";
}
head.appendChild(script);
}

that function is evidently called in the head section of the html file. and that's how I solved this problem :P

deb
25 Jul 2007, 2:41 AM
I tried this function "checkLocal" , it works in FFox but some problem in IE, the content of the local-en.js file is :


titles =
[
['ID1','text1'],
['ID2', 'text2'],
['ID3', 'text3'],
['ID4', 'text4'],
['ID5','text5']
];

msgs =
[
['msg1','hi'],
['msg2', 'welcome'],
['msg3','to locals']
];
any clue ? i am calling that in the header section


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>My page</title>
<link rel="stylesheet" type="text/css" href="my.css" />
<script type="text/javascript" src="my.js"></script>
<script>
checkLocal();
</script>

</head>

thanks

BernardChhun
25 Jul 2007, 2:48 AM
hey deb, be clearer than just saying "it has problems"...it could be anything for all that matters. :-|

ohh and your localize file will be a mess later on once your project grows if you keep it that way. do you realize you need to use a for sentences to get to your localized values?

in my case, if you didn't want to use the _ function, you could just do:


var buttonLabel = localization.labels.btn;

deb
25 Jul 2007, 3:19 AM
after i do couple of reloads of the page, i can get access to my localized data, in IE ???

whats going on ??

deb
25 Jul 2007, 3:28 AM
i.e. i try to access the "titles" array defined in the dynamically inserted local-en.js ...almost at the end of the page body. I get 'titles' undefined error in IE.

BernardChhun
25 Jul 2007, 3:43 AM
i.e. i try to access the "titles" array defined in the dynamically inserted local-en.js ...almost at the end of the page body. I get 'titles' undefined error in IE.

well are you sure the local file is completely loaded before calling your titles variable?

deb
26 Jul 2007, 1:43 AM
ye, thats what is happening, i knew, so right now i got to put a setTimeout before start using the localized content...

deb