PDA

View Full Version : Localization?



rlunder
20 Apr 2010, 2:53 AM
Hi. I'm quite new to Ext and I'm currently evaluating the Ext Designer. Looks like something that can help me get up to speed, but I can't seem to figure out how to localize the gui that the designer is generating. I've seen examples of how to localize handwritten code, but those presupposes that you've stored the text in class variables (that can be overridden), while the designer initializes all properties using literals.

Could anyone show me how to best localize the following window?



LogInWindowUi = Ext.extend(Ext.Window, {
title: 'Log In',
width: 286,
height: 139,
autoHeight: true,
draggable: false,
closable: false,
resizable: false,
modal: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
labelWidth: 100,
labelAlign: 'top',
layout: 'form',
border: false,
padding: 15,
ref: 'logInForm',
items: [
{
xtype: 'textfield',
fieldLabel: 'Email Address',
anchor: '100%',
name: 'email',
ref: '../emailField'
},
{
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '100%',
name: 'password',
inputType: 'password',
ref: '../passwordField'
}
],
fbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'Log In',
ref: '../../logInButton'
}
]
}
}
];
LogInWindowUi.superclass.initComponent.call(this);
}
});

aconran
20 Apr 2010, 11:26 AM
We are working on a localization enhancement that will place all textual/date/time properties on the prototype of the class so that they can easily be manipulated as you would with a typical Ext subclass.

adjohn
5 Jul 2010, 6:17 PM
Any word on when this can be expected? In the meantime, is there a preferred way to handle localization with ext designer?

jarrednicholls
6 Jul 2010, 5:11 AM
This is one of our priorities after our next release (coming later today). In the meantime...it's kind of hard actually and I would be bold enough to say that it's too difficult to even bother with it until the Designer properly "escalates up" all visual text properties from child items to the parent class' prototype, in such a way:



MyFormUi = Ext.extend(Ext.form.FormPanel, {
MyTextField_fieldLabel: 'Name',
MyTextField2_fieldLabel: 'Phone',

initComponent: function(){
this.items = [
{
xtype: 'textfield',
fieldLabel: this.MyTextField_fieldLabel
},
{
xtype: 'textfield',
fieldLabel: this.MyTextField2_fieldLabel
}
];
}
});


You see how the fieldLabel's are on the prototype of the FormPanel, which configures all of its children as such. This allows the MyFormUi's prototype to be overridden with a different language for all of the properties (or more specifically, the MyForm subclass of the MyFormUi that's generated by the Designer).

From the above example, you can see how it is a little difficult to do currently. Unless of course, you had everything setup perfectly and exported from the Designer one-time, and then manually edited the exported .ui.js file. But on a subsequent export, your work would be undone, so that's why it's hard at the moment. But again, this is a priority for us very soon.

gmarziou
15 Jul 2010, 9:35 AM
I am also interested in this improvement, please post here when you get news.

jarrednicholls
15 Jul 2010, 10:02 AM
We will certainly be informing everyone on this thread and the forums when this enhancement has been made. Thanks.

x10
22 Nov 2010, 2:16 AM
How about to enable Ext Designer to use simple global variables in component properties?
Is the following approach to build i18n site acceptable for Ext Designer?

index.html


...
<script type="text/javascript" src="js/myapp-lang-de.js"></script>
<script type="text/javascript" src="js/MyApp.ui.js"></script>
<script type="text/javascript" src="js/MyApp.js"></script>
<script type="text/javascript" src="js/on-load.js"></script>
...

myapp-lang-de.js


var MyAppLanguage = new Array ();
MyAppLanguage_Init = function () {
MyAppLanguage["APP_TITLE"] = "Meine i18n Web Anwendung";
}

MyApp.ui.js


MyAppUi = Ext.extend(Ext.Window, {
title: MyAppLanguage.APP_TITLE,
....

on-load.js


Ext.onReady(function() {
MyAppLanguage_Init ();
var myapp = new MyApp({
renderTo: Ext.getBody()
});
myapp.show();
});

devtig
30 Nov 2010, 2:10 AM
MyFormUi = Ext.extend(Ext.form.FormPanel, {
MyTextField_fieldLabel: 'Name',
MyTextField2_fieldLabel: 'Phone',

initComponent: function(){
this.items = [
{
xtype: 'textfield',
fieldLabel: this.MyTextField_fieldLabel
},
{
xtype: 'textfield',
fieldLabel: this.MyTextField2_fieldLabel
}
];
}
});


Looking forward to see this enhancement in the next Ext Designer version.

Similar request: http://www.sencha.com/forum/showthread.php?114644-xds-and-multilanguage-app

devtig
3 Apr 2011, 9:23 PM
bump

endielo
6 Sep 2011, 7:38 PM
When will the Ext Designer to support localization?

CaliLuke
7 Sep 2011, 4:10 PM
When will the Ext Designer to support localization?

It will take time, but it will. Can't be more specific than this, we have a lot on our plate that is equally important. One thing for sure though, updates will be coming a bit quicker than in the past, and the feature set will expand significantly (and keep growing after launch) compared to Designer 1.

bguban
27 Jun 2012, 2:19 PM
Hi. I create some fix for this problem.

I create a Controller Action in my Application. It query all components which contains text, title or fieldLabel config and it fires on beforerender event.

init: function() {
this.control({
"component[text],[title],[fieldLabel]": {
beforerender: this.onComponentBeforeRender
}
});
}


Then in onComponentBeforeRender function I invoke setText, setTitle or setFieldLabel for each selected component and put there translated value from global lang object.


onComponentBeforeRender: function(abstractcomponent, options) {
//console.log(abstractcomponent);


var accessors = {
title: 'setTitle',
text : 'setText',
fieldLabel : 'setFieldLabel'
};


for (var key in accessors){
if (typeof(abstractcomponent[key]) != "undefined"){
if(typeof(lang[abstractcomponent[key]])=="undefined"){
//console.log(abstractcomponent[key]);
unknownWords.push(abstractcomponent[key]); //DEBUG
}
abstractcomponent[accessors[key]](lang[abstractcomponent[key]] || abstractcomponent[key]);
}
}


}


It`s not good, but it`s working:)

PS
Sorry for my english