PDA

View Full Version : How to use the localization?



Elfayer
20 Jul 2012, 2:03 AM
Hi,

I would like to try the localization feature with this example:


Ext.define('DSK.view.desktopSouth.logout', {
extend: 'Ext.window.Window',
alias: 'widget.logout',

title: 'Logout',
html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
resizable: false,
height: 125,
width: 300,
buttons: [{
text: 'Yes'
},
{
text: 'No',
id: 'noLogout'
}]
})

I would like to change the static text of the buttons "yes" and "no" by something dynamic.

I've found that but don't know how to implement it on a view:



Ext.window.MessageBox.buttonText.yes

WillBill
20 Jul 2012, 2:16 AM
Ext.getCmp('noLogout').setText('button text');

WillBill
20 Jul 2012, 2:44 AM
This is probably a better solution:



Ext.define('DSK.view.desktopSouth.logout', {
extend: 'Ext.window.Window',
alias: 'widget.logout',
buttonsText: {
yes: 'something',
no: 'something else'
},
title: 'Logout',
html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
resizable: false,
height: 125,
width: 300,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
buttons: [{
text: me.buttonText.yes
},
{
text: me.buttonText.no,
id: 'noLogout'
}]
});
me.callParent(arguments);
}
});


Now each time you create it, you can specify buttonsText.


Ext.create('DSK.view.desktopSouth.logout', {
buttonsText: {
yes: 'new text',
no: 'new text'
}
}).show();


hope this helps

Elfayer
20 Jul 2012, 3:45 AM
I didn't succeed to make it work. And I'm not sure that's gonna make what I want.

I want my program to change language automatically just by changing the src of this script :

<script type="text/javascript" src="~/Ext/locale/ext-lang-fr.js"></script>

WillBill
20 Jul 2012, 4:30 AM
Working example:



<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/resources/css/ext-all.css" />
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/ext-all-debug.js"></script>
<script>
Ext.onReady(function() {
Ext.define('DSK.view.desktopSouth.logout', {
extend: 'Ext.window.Window',
alias: 'widget.logout',
buttonsText: {
yes: 'something',
no: 'something else'
},
title: 'Logout',
html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
resizable: false,
height: 125,
width: 300,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
buttons: [{
text: me.buttonsText.yes
},
{
text: me.buttonsText.no,
id: 'noLogout'
}]
});
me.callParent(arguments);
}
});

Ext.create('DSK.view.desktopSouth.logout', {
buttonsText: {
yes: 'new text',
no: 'new text'
}
}).show();
});
</script>
</head>
<body>


</body>
</html>


I'm assuming 'ext-lang-fr.js' contains string variables, right?
Let's say you have 2 variables in there.



var yes_variable = 'Qui';
var no_variable = 'No';


You can use those variables as shown below


Ext.create('DSK.view.desktopSouth.logout', {
buttonsText: {
yes: yes_variable,
no: no_variable
}
}).show();

Elfayer
20 Jul 2012, 5:44 AM
No that's not what I want, here you are not using the ext-lang-fr.js (for example). You only allow to modify manually two variables.

If the user is spanish, i'll charge the ext-lan-es.js, if the user is french, i'll charge the ext-lan-fr.js, etc.. And I want to adapt the language of the program according to the user language, using the localization : http://docs.sencha.com/ext-js/4-1/#!/guide/localization

WillBill
20 Jul 2012, 6:07 AM
I guess I missunderstood the question, this should work:



Ext.Msg.buttonText.no




<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-4.0.7/release/locale/ext-lang-de.js"></script>



result:


Ext.Msg.buttonText.no
"Nein"

Elfayer
20 Jul 2012, 6:12 AM
Yes, I want to use something like that : "Ext.Msg.buttonText.no", but I don't know how to put it in my code, because this is a view, and that code (Ext.Msg.buttonText.no), seems to be used on a controller, or did I miss something?

WillBill
20 Jul 2012, 6:21 AM
this should work for you




Ext.define('DSK.view.desktopSouth.logout', {
extend: 'Ext.window.Window',
alias: 'widget.logout',
title: 'Logout',
html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
resizable: false,
height: 125,
width: 300,
buttons: [
{
text: Ext.Msg.buttonText.yes
},
{
text: Ext.Msg.buttonText.yes,
id: 'noLogout'
}
]})


You can put it in either your view or controller.

Elfayer
20 Jul 2012, 6:37 AM
It's not working (because I charge the "ext-lang-fr.js")... But I have "Yes" and "No" on the buttons..


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="@Url.Content("~/Content/desktop.css")" type="text/css" media="screen" />
@*<link rel="stylesheet" type="text/css" href="/Scripts/ExtJS/resources/css/ext-all.css" />*@

<script src="@Url.Content("~/Ext/bootstrap.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Ext/resources/css/ext-all.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="~/Ext/locale/ext-lang-fr.js"></script>

<script src="@Url.Content("~/Scripts/src/app.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

</head>
<body>
<div id="main">
@RenderBody()
</div>
</body>
</html>



Here is the same thing :

Ext.define('DSK.view.desktopSouth.logout', {
extend: 'Ext.window.Window',
alias: 'widget.logout',

title: 'Logout',
html: "<center><br><p>Are you sure you want to logout ?</p><br></center>",
resizable: false,
height: 125,
width: 300,
buttons: [{
text: Ext.Msg.buttonText.yes
},
{
text: Ext.Msg.buttonText.no,
id: 'noLogout'
}]
})

Elfayer
22 Jul 2012, 11:02 PM
up

Albareto
23 Jul 2012, 12:56 AM
Have you tried:

Ext.MessageBox.buttonText.yes / Ext.MessageBox.buttonText.no?

This is the code in ext-lang-fr.js:


if (Ext.MessageBox) {
Ext.MessageBox.buttonText = {
ok: "OK",
cancel: "Annuler",
yes: "Oui",
no: "Non"
};
}

Also is your file located in the correct place?

WillBill
23 Jul 2012, 3:29 AM
Try a different language file, german or something.
I noticed that when I tried to use the french one, located on googlecode.com it gave me an error.
If other files work, but the french one does not, there is probably an error in the french language file itself.