PDA

View Full Version : Ux.locale.Manager



mitchellsimoens
27 Dec 2011, 12:49 PM
This is like my other locale manager (Ext.LocaleManager)... there are two differences to this one:


Doesn't support loading a locale file via <script>. It's only Ajax currently, will support JsonP in next release.
No need to rerender components to have the locale applied.


Not all components are supported on the dynamic locale but there are a couple examples in place that any class (Ext JS or custom) can be supported.

This also has been tested to work with Sencha Touch 2.

Sencha Market listing: http://market.sencha.com/addon/ux.locale.manager
GitHub Repo: https://github.com/mitchellsimoens/Ux.locale.Manager

mitchellsimoens
27 Dec 2011, 12:49 PM
This is the class I will further develop, not Ext.LocaleManager. This does not use bundles, no need for them.

omarc
14 Feb 2012, 9:07 AM
I wanted to know if anybody had any ideas on how to localize an Ext.DataView with Ext.locale.Manager?

This would be useful for certain labels within an XTemplate within a DataView.

I had thought of just overriding the "prepareData" function for each DataView and then passing in the labels I needed, but that seems rather long winded.

Anybody have any other ideas?

Thanks,

Omar

vadimv
5 Mar 2012, 9:14 AM
Hi Mitchell,

any news regarding localization from a locale file ? Thinking to a runtime localization from locale files and your implementation could be a solution to my qt-extjs based app.

babar.sajjad
30 Mar 2012, 6:42 AM
Hi Mitchell,

Great plugin to enable localization in to your app but I have few issues with this plugin. when I build my app into testing, the whole code merges in one file then in the override classes I get error when I tried to get locales.html or locales.text property because in the locales variable I got null value. The same thing work fine in normal mode so what should I do so that this plugin can work properly in testing or production mode.

And when should we have the loadScriptTag functionality enabled, any updates ?

Again thanks for this great plugin.

desmo
22 May 2012, 4:30 AM
Hello,

is this component still supported? I noticed an interesting issue: The MVC example only works when sencha-touch-all-debug.js or sencha-touch-all.js is used (st v 2.0.0 commercial was used for the test). When the other sencha-touch libs are used, Ext.ComponentQuery does not return all components (save/cancel buttons in the lower left corner and the datepicker).

Bug?

mitchellsimoens
22 May 2012, 4:33 AM
It works for me and app.json is using sencha-touch.js. Are you running it off a web server?

desmo
22 May 2012, 4:51 AM
Hi,

no i am running it in my local Safari instance. Path in app.json: "path": "../../st200com/sencha-touch-debug.js"

This displays everything except the 2 buttons in the lower left corner (red/green). Additionally when switching languages, the json file can not be loaded. Is this a same-domain problem? Chrome spits out a message that indicates that local files can't be loaded. Safari seems to allow it when in Dev mode.




It works for me and app.json is using sencha-touch.js. Are you running it off a web server?

mitchellsimoens
22 May 2012, 5:07 AM
You must always run your app through a web server.

desmo
22 May 2012, 5:08 AM
I will test it on a server - thanks for your help!



You must always run your app through a web server.

desmo
22 May 2012, 5:15 AM
Tested it using apache (xampp/osx) and safari.

Problems still exist: language switch fails (json cant be decoded) and the text of green/red button in the lower left corner is missing. Used lib: sencha-touch-debug.js (st 2.0.0 commercial).




You must always run your app through a web server.

mitchellsimoens
22 May 2012, 5:18 AM
I use it on apache (apache comes installed on OSX) and without any changes to the MVC app of ST2 it works with no issues.

desmo
22 May 2012, 5:43 AM
I have uploaded a test project (essentially your github mvc project):

http://www.i-byte.net/ux/st/mvc/

Browsers tested: current Chrome, current Safari.

Screenshot: 35497

Buttons lower left (missing texts), language switch is ignored.

mitchellsimoens
22 May 2012, 6:07 AM
Ok, it was working with the 2.0.1 RC version but upgrading to 2.0.1 final and the buttons do break. I also noticed your link is using 2.0.0. I will be fixing it for 2.0.1 final so you will probably need to upgrade it to 2.0.1

desmo
22 May 2012, 6:10 AM
Ok!


Ok, it was working with the 2.0.1 RC version but upgrading to 2.0.1 final and the buttons do break. I also noticed your link is using 2.0.0. I will be fixing it for 2.0.1 final so you will probably need to upgrade it to 2.0.1

mitchellsimoens
22 May 2012, 6:31 AM
Ok!

Turns out it is a framework bug. The override for the component that sets the flag to have enableLocale set to true is not being executed as it was.

This isn't the first time this bug has creeped up so I guess I will need to work around it a different way. For now you can set enableLocale : true and locale : Ux.locale.Manager on the buttons and that will enable it to work. I have pushed an update that will fix it for now until I fix it for good (hopefully) :)

desmo
22 May 2012, 6:35 AM
Thanks for taking time to look into the bug & the workaround!



Turns out it is a framework bug. The override for the component that sets the flag to have enableLocale set to true is not being executed as it was.

This isn't the first time this bug has creeped up so I guess I will need to work around it a different way. For now you can set enableLocale : true and locale : Ux.locale.Manager on the buttons and that will enable it to work. I have pushed an update that will fix it for now until I fix it for good (hopefully) :)

desmo
22 May 2012, 6:58 AM
One last question: the picker done/cancel button texts are also not updating when the language is switched. It seems like enabling locale & setting the locale manager in (override) Picker.js (doneButton, cancelButton) is not the correct way to solve this.



Thanks for taking time to look into the bug & the workaround!

mitchellsimoens
22 May 2012, 7:03 AM
Just pushed an update. I cannot reproduce it anymore with a couple changes. Let me know if this fixes it for you

desmo
22 May 2012, 7:21 AM
Looks good now, thanks :)


Just pushed an update. I cannot reproduce it anymore with a couple changes. Let me know if this fixes it for you

intellix
17 Jun 2012, 3:52 PM
Hello,

is this component still supported? I noticed an interesting issue: The MVC example only works when sencha-touch-all-debug.js or sencha-touch-all.js is used (st v 2.0.0 commercial was used for the test). When the other sencha-touch libs are used, Ext.ComponentQuery does not return all components (save/cancel buttons in the lower left corner and the datepicker).

Bug?

This is also the same issue I was getting earlier. Spent a couple of hours trying to see what the difference between my code and yours was (mine is output from Architect so I can't really change it without abandoning Architect).

Taken straight from the Issue I opened up on Git but putting it onto here so other people don't miss what I found:
These have to be on the outside, otherwise the button text don't get translated:

Ext.require([
'Ux.locale.Manager',
'Ux.locale.override.st.Component'
]);
they can't be inside Ext.application({ requires: [] }) like the rest of them... I guess this has something to do with the resources not being loaded in time/in the correct order otherwise? Even though I thought the required: [] stuff in the other overrides would say what it needed first.
You also need to use the microloader to load in the resources like so:
"sdk/microloader/development.js"
So that the files are loaded by file, rather than the way Architect spits out the code:
"sdk/sencha-touch-all-debug.js"

So if it requires the microloader to load in the files one by one, and the Manager+Component files need to be loaded first, does this work properly when the application is bundled as it seems to be quite bitchy about what's loaded when.
I'm quite a beginner, my first pull-request just got it working for me but after looking at the above I guess quite a bit of work needs doing to fix it.

mitchellsimoens
18 Jun 2012, 5:39 AM
Ux.locale.Manager does not require the microloader or an app to be created by Sencha Command. Ux.locale.Manager comes with 2 examples, the mvc one that was created with Sencha Command and a regular simple example that just loads sencha-touch-debug.js and both of them work.

intellix
18 Jun 2012, 6:04 AM
Ux.locale.Manager does not require the microloader or an app to be created by Sencha Command. Ux.locale.Manager comes with 2 examples, the mvc one that was created with Sencha Command and a regular simple example that just loads sencha-touch-debug.js and both of them work.

It doesn't work with code generated with Architect, for instance go to the MVC example provided and replace:



<script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>

with


<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/touch/sencha-touch-2.0.1/resources/css/sencha-touch.css"/>
<script type="text/javascript" src="https://extjs.cachefly.net/touch/sencha-touch-2.0.1/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>


And in the console you get the error:


Uncaught TypeError: Cannot call method 'get' of null


And to kill button translations only inside app.js (which is again how Architect spits out the code) then change:


Ext.require([
'Ux.locale.Manager',
'Ux.locale.override.st.Component'
]);


Ext.application({
name: 'Locale',


requires: [
'Ext.MessageBox',
'Ext.Ajax',


'Ux.locale.override.st.Button',
'Ux.locale.override.st.Container',
'Ux.locale.override.st.TitleBar',
'Ux.locale.override.st.field.Field',
'Ux.locale.override.st.picker.Picker'
],

to

Ext.application({
name: 'Locale',


requires: [
'Ext.MessageBox',
'Ext.Ajax',


'Ux.locale.Manager',
'Ux.locale.override.st.Component',

'Ux.locale.override.st.Button',
'Ux.locale.override.st.Container',
'Ux.locale.override.st.TitleBar',
'Ux.locale.override.st.field.Field',
'Ux.locale.override.st.picker.Picker'
],

mitchellsimoens
18 Jun 2012, 6:21 AM
Then architect needs a way to allow you to require before Ext.application

intellix
18 Jun 2012, 7:50 AM
Ok so this has something to do with the order that things are loaded. I guess the overrided classes need to load before the actual classes otherwise it doesn't work.

I guess the first Ext.require({}); forces those items to be loaded before anything else.

Edit: mitchellsimoens has released an update which fixes what I was moaning about

intellix
19 Jun 2012, 2:22 AM
At the moment I can see that for HTML it only allows to translate the entire thing (whereas I need to translate parts like: Cool products - <b>Buy some now</b>

So I guess I will add some sort of functionality for find/replace of variables when it comes to HTML so translators don't have to deal with (and break) HTML, something like:

html: '{Cool products} - <b>{Buy some now}</b>'

fr.json


{
"Cool products": "Le cool products",
"Buy some now": "Le buy somé"
}


Also, with the above 'example' I was thinking that creating a list of ID's and having the english content would be a bit of a waste... so perhaps you could have a 'default' language which doesn't get translated and is used for the keys of the other language. So instead of:


// en.json
{
button: {
cancel: "Cancel",
done: "Done"
}
}

// fr.json
{
button: {
cancel: "Le cancel",
done: "Le doné"
}
}


You would just have:



// 1) Language is EN, do nothing
// 2) Changed to FR, grab file and use the content as keys:

// fr.json
{
"Cancel": "Le cancel",
"Done" : "Le doné"
}


Agh... Ext.Template doesn't support spaces in variable's like Mustache does: {Cool products} for instance -.- Hitting wall after wall since I started

intellix
19 Jun 2012, 6:50 AM
Sorry to spam but, I've got partial replacing done for html.


// Inside Ux/locale/override/st/Component.js - replace setLocale() function with this:
setLocale : function(locale) {
var me = this,
locales = me.locales || me.getInitialConfig().locales,
html = locales.html,
manager = me.locale,
defaultText = '';


if (html) {


if (Ext.isObject(html)) {
defaultText = html.defaultText;
html = html.key;
}


if (Ext.isString(html)) {
// Allow translating parts of string
Ext.each(html.match(/\{(.+?)\}/g), function (found) {
var text = found.substr(1).substr(0,(found.length-2));
html = html.replace(found, manager.get(text, defaultText));
});


me.setHtml(html);
}
}
}

And then on your elements, something like:


locales: {
html: "{Fairy tales} - <span>{are great}</span>"
}


And inside your JSON files:


{
"Fairy tales": "le fairy tales",
"are great": "le un great"
}

intellix
2 Jul 2012, 8:40 AM
Anyone got any idea how this can be done for DataView/DataItem template stuff?

I'm trying to implement locality to the validation strings. First I tried to override the validation stuff (which you can't because it's a singleton. Then I tried to override the model stuff which loops through the errors after validation for each field and apply the translation there (which you can't because this only works for components) and now I'm looking at DataView overriding as I'm looping through the errors upon pressing a button and setting it to a DataView.

I'm using a TPL and the array of errors to list each of the errors under particular fields, which looks like this:



errorElement = Ext.create('Ext.Panel', {
cls: [
'error-list'
],
id: key + '-errors',
items: [
{
xtype: 'dataview',
scrollable: false,
itemTpl: [
'{text}'
],
store: {
fields: ['text'],
data: errorDataList
}
}
]
});


Not entirely sure how this is going to work because this is all based on applying a locales: {} variable to a component with the string key you want the translation of. I have absolutely no idea where to start as there's no obvious place that shows where the DataItems are created within a DataView as it gets the data

mitchellsimoens
2 Jul 2012, 9:11 AM
The autoupdate currently works for components as that's the only thing that displays things.

However there are classes that contain text. There are a couple ways we can proceed with these things... in applyLocales method of Ux.locale.Manager we can fire an event and your application can listen to this and handle it. Or we can create mixins for these other classes that we can use and those can have the individual logic for each class... any other suggestions for that?

For the dataview, wonder if you could use prepareData or hook into the container's updateListItem method

intellix
3 Jul 2012, 1:55 AM
Cool, thanks for the pointer.
I can change the content within prepareData but updateListItem doesn't seem to run for my DataView/DataItem stuff.
I did try this with my DataView, but it didn't quite work:



itemConfig: {
enableLocales: true,
locales: {
html: 'test'
}
}


I see that the HTML for DataItem is set after applying the TPL within: Ext.dataview.element.Container#getItemElementConfig

Edit: Got it to work by taking the locales:{} etc outside of the itemConfig and actually into the item itself like:

{
xtype: 'dataview',
locales: 'blah'
}

As soon as the dataview is created I can loop through the data that is there. I didn't think the data would exist yet so the locales: {} stuff needed to be on the dataItem's that it creates. I can get it sort of working with setLocales by looping through the store but I change the original content also. Wanted to make it change on the prepareData method so it never touches the original content.
Edit: had some issues but figured I wasn't returning the overidden stuff debugging line-by-line

Stoot98
4 Jul 2012, 12:51 AM
The autoupdate currently works for components as that's the only thing that displays things.

However there are classes that contain text. There are a couple ways we can proceed with these things... in applyLocales method of Ux.locale.Manager we can fire an event and your application can listen to this and handle it. Or we can create mixins for these other classes that we can use and those can have the individual logic for each class... any other suggestions for that?

For the dataview, wonder if you could use prepareData or hook into the container's updateListItem method

Hi Mitchell,

I'm coming across a similar issues where DataViews/Templated components need to be refreshed (where there are string literals inside) and Stores regenerated which requires a little more specific logic than the standard component properties do for updating.

I like the idea of an event being fired which these troublesome components can listen to it and do what they need to.

Another option might be to allow a function to be passed in the locales config which would get executed in the scope of the component when the locale is changed and this logic can reside there.

Anyways, I'll try and report back on what I end up doing and seeing what works best.

Thanks for your work on this - it certainly takes the pain out of localising apps!

Stuart

intellix
6 Jul 2012, 6:17 AM
I spent a couple of days trying to get the DataView/Item done but just couldn't get it sorted properly.

In the end I just did this inside DataView override:



setLocale : function(locale) {
var me = this,
locales = me.locales || me.getInitialConfig().locales,
manager = me.locale,
store = me.getStore();


store.each(function (data) {
var text = defaultText = data.get('text');
data.set('text', manager.get(text, defaultText));
});


me.callOverridden(arguments);
},


It changes the original content so you can't translate it back/again... but I'm going to have to move onto more important things for now.

I tried overriding prepareData() but it's called before the item get's the locale manager stuck to it so it's too early to do it for me.

Also: I was talking about having a default locale that doesn't need translations. In the end I just made the defaultText the original text that get's passed into the translation tool so you don't need english translations and if the text hasn't been done then it will display english anyway... better in english than in nothing.

pepperseb
10 Jul 2012, 12:53 AM
Hi everyone,

First, I want to thank Mitchell for this great plugin...

Now, I have a newbie question, how can I use the plugin to translate my defaultBackButtonText and the loadingText properties?

intellix
25 Jul 2012, 3:22 PM
Just looking at translating the Title within NavigationView/Bar and it's peppered all over the code.
Looks like it's going to require quite a bit of know-how to edit this one and I bet it changes massively in the next release.

Edit: I decided to kill all NavigationView/Bar's in my application as I feel they're annoying for adding Back Button as well. I think you either use the NV/Bar for your entire application or not at all...

intellix
28 Jul 2012, 2:37 PM
So that my translation files are smaller and alot of my application pulls in translated data/information from the server my API calls are something like:

/en/get-events
/de/get-events

To do this, for all of my proxy, ajax calls I do: /{locale}/get-events

And this code to replace the {locale} variable:


Ext.define('Ux.data.Connection', {
requires: [
'Ext.data.Connection',
]
}, function() {
Ext.override(Ext.data.Connection, {
request: function (options) {


var locale = 'en';


if (Ux.locale.Manager.getLanguage()) {
locale = Ux.locale.Manager.getLanguage();
}


options.url = options.url.replace('{locale}', locale);
this.callParent(arguments);


}
});
});

intellix
30 Jul 2012, 1:42 PM
Had to translate selectfields. As you can't set a locales: {} with everything in there (doesn't really make sense). I removed all the placeholder stuff as I'm not really using it (strings default to EN for me). It's easy looking at the others to add it back. I see that if you translate a label on the selectfield as well then setLocale gets called twice on the same component, which I guess need to be merged somehow.

Basically, upon setLocale it sets the _originalString field to the store to hold the displayField so that when you change the locale again, it will still know the original string.

Also, at least have a locales: {} set on the dropdown



Ext.define('Ux.locale.override.st.field.Select', {
override : 'Ext.field.Select',


requires : [
'Ux.locale.override.st.Component'
],


setLocale: function(locale) {


// TODO: Merge this and Ux.locale.override.st.field.Field as they're both running the same function?


var me = this,
locales = me.locales || me.getInitialConfig().locales,
manager = me.locale,
displayField = me.getDisplayField(),
label = locales.label,
store = me.getStore(),
fields;


// Translate the label if set
if (label) {
if (Ext.isObject(label)) {
label = label.key;
}


label = manager.get(label);


if (Ext.isString(label)) {
me.setLabel(label);
}
}


// There's a store as well, translate stuff
if (!store) {
return;
}
fields = store.getFields();


if (manager && fields) {


// Allow saving original value for re-translation later
fields.push("_originalString");
store.setFields(fields);


store.each(function (record) {


if (record.get('_originalString') === undefined) {
record.set('_originalString', record.get(displayField));
}


record.set(
displayField,
manager.get(record.get('_originalString'))
);


});


me.updateStore(store);


}


}


});

georgesq
4 Sep 2012, 12:21 PM
Hi Mitchell... i´m trying to put your component on my app, but nothing key is loaded from .json... my code:



Ext.Loader.setConfig({
enabled : true,
paths : {
Ux : 'Ux'
}
});


Ext.application({
name: 'selfservice',
bundle: '',


requires: [
'Ext.Ajax',
'Ext.MessageBox',
'Ext.i18n.Bundle',
'Ux.locale.Manager',
'Ux.locale.Manager',
'Ux.locale.override.st.Component',
'Ux.locale.override.st.Button',
'Ux.locale.override.st.Container',
'Ux.locale.override.st.TitleBar',
'Ux.locale.override.st.field.Field',
'Ux.locale.override.st.field.DatePicker',
'Ux.locale.override.st.picker.Picker',
'Ux.locale.override.st.picker.Date'
],


models: ["User"],


stores: ["Users"],


controllers: ["Users"],


views: ["AuthenticateForm"],

icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},


isIconPrecomposed: true,


startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();

var userLang = (navigator.language) ? navigator.language : navigator.userLanguage;

Ux.locale.Manager.setConfig({
ajaxConfig : {
method : 'GET'
},
language : 'en',
tpl : 'resources/{locale}.json',
type : 'ajax'
});
Ux.locale.Manager.init();

Ext.i18n.Bundle.configure({
bundle: 'SelfService',
language: userLang,
path: 'resources',
noCache: false
});

var authenticateForm = {
xtype: "authenticateform"
};

// Initialize the main view
Ext.Viewport.add([authenticateForm]);
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});



partial code from my view


Ext.define('selfservice.view.AuthenticateForm', {
extend: 'Ext.form.FormPanel',
alias: "widget.authenticateform",
config: {
fullscreen: true,
scrollable: 'vertical'
},

initialize: function() {
var titlebar, buttonbar, authenticateButton, fields;


titlebar = {
id: 'authenticateFormTitlebar',
xtype: 'toolbar',
locales : {
title : 'toolbar.all.upTitle'
}
};


Tks for your help
George

demon222
10 Sep 2012, 12:32 PM
yeeeee

some support for SA2 (extjs 4.1.1) ?????????????????????????????????

mitchellsimoens
10 Sep 2012, 12:34 PM
yeeeee

some support for SA2 (extjs 4.1.1) ?????????????????????????????????

Are you asking if it works for Ext JS 4.1.1 or if it can be included into Sencha Architect 2?

demon222
11 Sep 2012, 4:04 AM
Yes. Is it possible to integrate sencha extjs Architect 2 for 4.1.1?

mitchellsimoens
11 Sep 2012, 4:45 AM
You can add javascript resources to your project but that won't create the anything for you to directly use. In code you can use it and of course you can create your own configs but I don't think the custom configs will support objects as you need to specify for locale

demon222
12 Sep 2012, 2:10 AM
Please, give a complete example - where, what, and how ...

demon222
15 Sep 2012, 5:53 AM
...?????

demon222
19 Oct 2012, 10:30 AM
mitchellsimoens , can you describe how to easily integrate it with Sencha Architect 2???

Thank you for the quick response ...

intellix
19 Oct 2012, 11:48 AM
I can answer that I guess.
I'm using Architect so it is possible. You just don't see the text inside your app.

Inside the root folder of your app.html '/' add the files like: Ux/locale/Manager.js etc
Inside the root folder of your app.html '/' add a folder for your translations: '/locales'

Inside 'Application' within Architect, add them all as requires like:
Ux.locale.Manager
Ux.locale.override.st.Component
etc
etc

Inside 'Application > Launch add the init code

Go to some sort of component that you want translating. and just add a custom parameter: locales: {html: "blah blah"}

demon222
19 Oct 2012, 1:40 PM
thx

problem in ext.window.Window (SA2) ::: title

Ext.ComponentQuery.query('component[enableLocale]') >> []



Ext.define('MBD.view.bodys.Window', {
extend: 'Ext.window.Window',
alias: 'widget.BodysWindow',

requires: [
'MBD.view.bodys.Form'
],

itemId: 'BodysWindow',
minHeight: 40,
width: 400,
resizable: false,
layout: {
type: 'fit'
},
bodyPadding: 3,
title: 'Body edition',
constrainHeader: true,
modal: true,

initComponent: function() {
var me = this;

Ext.applyIf(me, {
locales: {
title: 'windows.titles.bodys'
},
items: [
{
xtype: 'BodysForm'
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
itemId: 'btSaveForm',
text: 'Save'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
itemId: 'btClearForm',
text: 'Clear'
}
]
}
],
listeners: {
beforerender: {
fn: me.onBodysWindowBeforeRender,
scope: me
}
}
});

me.callParent(arguments);
},

onBodysWindowBeforeRender: function(abstractcomponent, options) {
Ux.locale.Manager.init();
}

});

demon222
26 Oct 2012, 3:08 AM
new locales for grid column (extjs4);-)



Ext.define('Ux.locale.override.extjs.HeaderContainer', {
override : 'Ext.grid.header.Container',

requires : [
'Ux.locale.override.extjs.Component'
],

setLocale : function(locale) {
var me = this,
locales = me.locales,
text = locales.text,
manager = me.locale,
defaultText = '';

if (text) {
if (Ext.isObject(text)) {
defaultText = text.defaultText;
text = text.key;
}

text = manager.get(text, defaultText);

if (Ext.isString(text)) {
me.setText(text);
}
}

me.callOverridden(arguments);
},

setText : function(text) {
this.textEl.update(text);
this.text = text;
return this;
}
});

szimek
8 Nov 2012, 6:20 AM
I'd like to translate dataview.List#emptyText, but I'm using some HTML there and I'd like to avoid putting it in translated text. Is there any way to do it?

The way Sencha loads classes, makes Ux.locale.Manager unavailable while loading classes (I'm loading in inside Ext.application#requires and then initializing it inside Ext.application#launch method), so I guess something like this won't work:


Ext.define("MyApp.view.List", {
config: {
emptyText: "<lots of html>" + Ux.locale.Manager.get("emptyText") + "</lots of html>"
},
});

I've got the same issue in other places as well e.g. with templates. In Ext.Panel view I'm using quite a long template - is there a way to translate just parts of the template, so that I don't have to put the whole template into translated text?

It looks like Sencha in most places accepts only strings, which are evaluated when class is loaded and doesn't allow to pass e.g. functions that return strings to defer their evaluation.

nfsilva999
12 Nov 2012, 3:45 AM
You must always run your app through a web server.

Hi Mitchell,
I have some problems with this plugin, maybe you can help me.

I´m using Ux.locale.Manager.setConfig like this

Ux.locale.Manager.setConfig({
ajaxConfig : {method : 'GET'},
language : 'pt',
tpl : './locales/pt.json',
type : 'ajax'
});

Ux.locale.Manager.init();

where pt.json is something like this:

{"buttons": {"cancel":"Cancelar","save":"Guardar","done":"OK"},"months": {"1": "Janeiro","2": "Fevereiro","3": "Março","4": "Abril","5": "Maio","6": "Junho","7": "Julho","8": "Agosto","9": "Setembro","10": "Outubro","11": "Novembro","12": "Dezembro"}}

No problem so far. I´m trying apply this into Date Picker. Works good on Browser - Chrome. However, when i´m using phonegap, the location doesn´t work anymore.

You said that the application must run through a web server. What this mean? Means that I can´t work on phonegap?

Thanks in advance,

intellix
11 Dec 2012, 7:42 AM
Need to use locale changing within an itemTpl... anyone come up with anything yet for this that they're cool to share?

For instance:



// In other HTML text I did something like {{Text to translate}} for translating things but here it would probably mess up
<div>
<div>Type: {type}</div>
<div>Status: {status}</div>
</div>

lucian.ilea
5 Feb 2013, 2:09 PM
Hello,

I am new to ST2 and I am trying to build a multilanguage app. I am currently using the Ux.locale.Manager plugin - which I find very useful!

But I also have a problem while using it... I have a tabPanel which uses a store to load some HTML data from a remote server. The store's url is pulled from the locales files using:


Ux.locale.Manager.get('url.link1');

The store's content is loaded when the panel is showed on the screen.

The change language code:


onLangChange: function(field, value) {
var lang = field.originalValue;
Ux.locale.Manager.updateLocale(lang);
this.getOvLang().hide();
this.getTbPanel().fireEvent('show');
},

After the updateLocale call, I am hidding the overlay I use for the language options, and then fire the show event of the Panel which displays the data. After this step, the get function I use to set the store url returns undefined (or the default value if I set one). The language is changed, but the isLoaded (in Ux.locale.Manager) function returns false.

If I tap on another tab and then tap again on that one, the correct language is loaded.

Can you figure out what am I doing wrong?

Thank you!

Best regards,
Lucian

tiagoadp
22 Feb 2013, 1:20 AM
Hello i am really interested in using this locale extension, but i need a guick guide to use with architect 2.1, if anyone can provide a text based one i will be most pleased!

Tnx.

intellix
22 Feb 2013, 1:41 AM
For using with Arcitect you just add a custom parameter on everything like a button:

locales: {
text: "Register"
}

You won't see your text within Architect, apparently they're sorting this out in a future version to be able to "process" your parameters so could add ability to see your default text or something in the future

tiagoadp
24 Feb 2013, 1:27 PM
Ok, but, how to make it work with architect configs? i mean. i use a require on the application then i use the loader to wrap the Ux to a custom folder, etc...? i need a guide like that... new to architect 2.1 ...


For using with Arcitect you just add a custom parameter on everything like a button:

locales: {
text: "Register"
}

You won't see your text within Architect, apparently they're sorting this out in a future version to be able to "process" your parameters so could add ability to see your default text or something in the future

tiagoadp
24 Feb 2013, 5:26 PM
Ok got it runnig with SA2 =D>

Really nice extension, nice work!

tiagoadp
24 Feb 2013, 6:05 PM
Got issue with Window Title...

It doesn´t change it... Tryed to make an override for window, but nothing worked... any1 has a solution?

dhruvchauhan
12 Jun 2013, 1:46 AM
Hi

Can we use .properties files instead of language specific json files? How to achieve this?

Thanks
Dhruv

dhruvchauhan
12 Jun 2013, 1:49 AM
Hi

Can we use .properties files instead of .json?

Thanks
Dhruv

madupiz
3 Sep 2013, 8:46 AM
Hi babar,
Were you able to build successfully with this plugin?

anitacynax
11 Apr 2014, 4:57 AM
I am using the Ux.locale.Manager extension and am having trouble localising an item that is nested within another item. I have a toolbar which has an item called Fruits. This in turn has a (menu) item called Apples. When I call the updateLocale method, the Fruits item text changes to its German counterpart (Fruchte) but the Apples text is not translated. What am I doing wrong? Here is my code:

{
xtype: 'toolbar',
region: 'south',
items: [
'->',
{ locales : {
text: 'fruits'},
menu: {
items: [
{ locales: {
text: 'apples'},
width: 'auto',
handler: function () {
window.location = '/fruits/apples.castle';
}
}
]
}

}
]
}