Ext.LocaleLoader, to dynamically load and apply your locale files (ExtJS + MVC)

[TigrouMeow]

Hello,

I worked on a localization manager / loader recently because I really required a dynamic behavior which fits ExtJS 4 and MVC. I tried the "official" localization examples, as well as the very recently posted "LocaleManager", but it's not what I was looking for. I hope this will help some of you as well

I still need to test it (tested on Google Chrome only) and enhance it a bit more.

I posted the project on GitHub, at this url:
https://github.com/TigrouMeow/extjs-locale-loader
There is an example with it, please try it.

I'd love to get a some feedbacks Thanks!

[pef]

Thanks !
I won't be able to look into this until next week, but I definitely need something like this : just to let you know that at least one person is interested

[TigrouMeow]

Great I'm looking forward for your feedback!

[SMMJ_Dev]

Nice, I can't wait to try this out when I get time. I am going to try it out for more than locale purposes. This may be good for our project specific naming conventions

[TigrouMeow]

Who did try it? Can't wait to get feedback on this

[nosklo]

Hello TigrouMeow,

I'm very interested in your work, but my use case is slightly different, so I don't know if it would fit:

I'm trying to translate existing ExtJS classes. For example, the text on the grid column menu shows "Sort Ascending", and I want to translate that.

On Ext3 I've been including the locale/ext-lang-$language.js file to do that.

On Ext4, I found that Ext.grid.header.Container.prototype contains the string I want to change. But with dynamic loading, just including the locale file doesn't work, since it runs before extjs/grid/header/Container.js gets loaded by the framework. So I get error.

I'm wondering if your code could work for existing Ext classes, and how/where I should put the translations in that case. It would be wonderful if the translation for specific ExtJS file could load just after the actual file.

Any hints?

Thanks in advance
nosklo

[TigrouMeow]

The right way would be to use the ExtJS locale files for that, for sure. The "LocaleLoader" doesn't take in charge the ExtJS locale files yet but it should... so it will

It's a bit tricky though, it would have to execute the content of the ext-lang-xx.js everytime a new widget class is loaded. I'm not sure how to do this yet, any idea ?

[nosklo]

The right way would be to use the ExtJS locale files for that, for sure. The "LocaleLoader" doesn't take in charge the ExtJS locale files yet but it should... so it will

Thing is, existing ExtJS locale files are not working currently, for dynamic MVC loading. I can't just include it, because when it runs, Ext still didn't load the required classes yet, so it has nothing to apply the string changes to.
The only way I found to make existing locale files to work is to include ext-all.js thus defeating dynamic loading completely.

It's a bit tricky though, it would have to execute the content of the ext-lang-xx.js everytime a new widget class is loaded. I'm not sure how to do this yet, any idea ?

I think we could have something just like you did for your classes, but for Ext classes.

I mean, the same ext-lang-xx.js file wouldn't get executed many times over and over again. Instead, we could have a separate locale/xx/ClassName.js file for each existing ExtJS class, and it would get automatically loaded just after the original file.

Example:

Ext.grid.Panel would load extjs/grid/Panel.js and the LocaleLoader would kick in, loading locale/fr/grid/Panel.js

What do you think? Is that possible?

[TigrouMeow]

I mean, the same ext-lang-xx.js file wouldn't get executed many times over and over again. Instead, we could have a separate locale/xx/ClassName.js file for each existing ExtJS class, and it would get automatically loaded just after the original file.

It's easy to do, but I don't think we should, mainly for two reasons:

• we'd have to make available all the files in locale/xx, for every classes
• there is a neat ExtJS locale file already, we shouldn't create anything on our own, and use this file instead

The only solution I see is that we must load this file at the beginning (dynamically, by the LocaleLoader, of course), then the LocaleLoader will re-execute the script after every ExtJS widget classes is loaded.

Let me try to implement this today, and let's see how it works

[nosklo]

• we'd have to make available all the files in locale/xx, for every classes
• there is a neat ExtJS locale file already, we shouldn't create anything on our own, and use this file instead

Well, current ExtJS locale file doesn't work... It fails! Even when I use sencha tools to build my application, execution of code stops on the first unused/undefined class in the current locale file code.

Also, current ExtJS locale file is incomplete anyway - it seems to come unchanged from Ext3. There are lots of new classes and texts to translate on Ext4 classes that aren't mentioned on the current locale file.

To split the current locale file into multiple files isn't much work, and by doing it we would gain benefits:

• no locale configuration for classes you're not using.
• Ideally, in the final built and minified application, no reference to unused classes would show up since the locale part for those classes wouldn't even get included.
• Seems easier to implement since no run-again trick is needed, we would just adapt your current code to load from different path