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

[TigrouMeow]

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

I successfully implemented my idea (with the current ExtJS locale files - but corrected, I had to remove the "Ext.onReady"). It works well, the only issue is that it executes the localization code too many times (more than necessary), but it's not enough to impact the performance anyways.

Is the ExtJS locale file fails for you every time you use it, or only during the build? It's maybe incomplete as well, but we can hope that one day Sencha will deliver a complete one. It's not our job do make those ones, is it? :p

About your idea now, I have a main issue. How would the LocaleLoader knows for which class it has to actually load the locale file? We can't possibly load for every single class in the framework.

[nosklo]

I successfully implemented my idea (with the current ExtJS locale files - but corrected, I had to remove the "Ext.onReady"). It works well, the only issue is that it executes the localization code too many times (more than necessary), but it's not enough to impact the performance anyways.

So you have to modify the file anyway...

Is the ExtJS locale file fails for you every time you use it, or only during the build? It's maybe incomplete as well, but we can hope that one day Sencha will deliver a complete one. It's not our job do make those ones, is it? :p

Well, my current "job" is to make the program work, since that's what my boss is asking.

However, since extjs4 is lacking this dynamic locale support, my intention is to contribute back the code, since it is open source GPL code.

Ultimately, that makes it our job

The existing locale file fails every time I try to use it with dynamic loading (as in including ext.js). If I use static loading (as in including ext-all.js like in the past with ext3) it works.

My guess is that sencha didn't touch locale files for ext3 -> ext4 transition - it is the same locale file used in ext3 so it can't work on the new class approach. It has to be changed anyway, I don't see why try to use it.

It is not just incomplete. It doesn't work.

About your idea now, I have a main issue. How would the LocaleLoader knows for which class it has to actually load the locale file? We can't possibly load for every single class in the framework.

It should use the name of the class being loaded:

1. Some requirement of some user class asks for a ext class, (example: Ext.form.field.ComboBox)
2. Existing ext loader code kicks in, loading the file based on the required class (example: it loads extjs/form/field/ComboBox.js)
3. LocaleLoader would use the same information (name of the class) to load a locale text overwriter for that class only (if it exists) from the path locale/fr/form/field/ComboBox.js

Steps 1 and 2 already work automatically in ext4 if you use ext.js (dynamic loading).

When any undefined class is requested by some code, ext dynamic loader kicks in and loads that class javascript file based on a simple convention (Ext.foo.bar.Baz becomes extjs/foo/bar/Baz.js). My idea was to use the same convention to load the locale (locale/LANGUAGE_HERE/foo/bar/Baz.js).

[Susanta_bmc]

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!

Thanks!!.. awesome job.... I implemented in our project today, it works great. But i was wondering in a bigger environment it will be difficult to maintain so many files, Can't we have a single file per locale. rather than for each class.

[TigrouMeow]

Thanks!!.. awesome job.... I implemented in our project today, it works great. But i was wondering in a bigger environment it will be difficult to maintain so many files, Can't we have a single file per locale. rather than for each class.

Thanks a lot, great it works. Well, if you want to use only one file, this LocaleLoader loses a bit of its interest, but YES, it's possible, I can add a config option for that. Just tell me here when you really need it and I'll add the option.

[TigrouMeow]

However, since extjs4 is lacking this dynamic locale support, my intention is to contribute back the code, since it is open source GPL code. Ultimately, that makes it our job

True!

It should use the name of the class being loaded:

1. Some requirement of some user class asks for a ext class, (example: Ext.form.field.ComboBox)
2. Existing ext loader code kicks in, loading the file based on the required class (example: it loads extjs/form/field/ComboBox.js)
3. LocaleLoader would use the same information (name of the class) to load a locale text overwriter for that class only (if it exists) from the path locale/fr/form/field/ComboBox.js

Steps 1 and 2 already work automatically in ext4 if you use ext.js (dynamic loading).

When any undefined class is requested by some code, ext dynamic loader kicks in and loads that class javascript file based on a simple convention (Ext.foo.bar.Baz becomes extjs/foo/bar/Baz.js). My idea was to use the same convention to load the locale (locale/LANGUAGE_HERE/foo/bar/Baz.js).

This is easy to add as it's the current behavior of LocaleLoader of the custom classes. However you don't think that it's going to be a hell of a bunch of files to translate? There will be really many! Don't you think that it's an issue?

[Susanta_bmc]

Thanks a lot, great it works. Well, if you want to use only one file, this LocaleLoader loses a bit of its interest, but YES, it's possible, I can add a config option for that. Just tell me here when you really need it and I'll add the option.

Thanks,Whenever you are ready/publish it let me know i will download it from there.
Please correct me on this:


to get existing ExtJS classes. like the text on the grid column menu shows "Sort Ascending",


I just need to pass the value to extLocalePath in setLocale right?


For example:


Ext.Loader.setLocale({
enabled: true,
//This locale will be driven through the user input
language: Ext.getDom('locale-holder').getAttribute('locale'),
localizedByDefault: false,
extLocalePath:'/itm/include/ext-4.0.6/locale',
types: [ 'view' ]
});

[Susanta_bmc]

Hi TigrouMeow,

I found an issue with the ext-locale-loader, So thought of to share with you,

When i used German locale( de), while using the Ext.util.Format.number , I got to see that the browser is throwing a out of memory exception, On debugging i found that it is happening at: ext-lang-de.js at the line

return Ext.util.Format.__number(v, format || "0.000,00/i");

In the below shown code.

    if(Ext.util.Format){
        Ext.util.Format.__number = Ext.util.Format.number;
        Ext.util.Format.number = function(v, format) {
            return Ext.util.Format.__number(v, format || "0.000,00/i");
        };

        Ext.apply(Ext.util.Format, {
            thousandSeparator: '.',
            decimalSeparator: ',',
            currencySign: '\u20ac',  // German Euro
            dateFormat: 'd.m.Y'
        });
    }

So I commented out the

 Ext.util.Format.__number = Ext.util.Format.number;
        Ext.util.Format.number = function(v, format) {
            return Ext.util.Format.__number(v, format || "0.000,00/i");
        };

As i did not see anything of these in fr locale though the "," is the decimal separator in Fr locale. Infact I did not see the above code piece anywhere other than German locale.

upon commenting the formatting was fine.

I created the same error with this sample code(cellediting.zip).

1. If you are using IE 8 you gonna see something like this. Out of Memory at line 5753.
2. The attached code has been implemented with MVC, with a ext-locale-loader.js, which loads the localized strings as been configured in app.js

something like this:

Ext.Loader.setLocale({
    enabled: true,
    language: 'de',
    localizedByDefault: false,
    extLocalePath:'/ext-4.0.6/locale',
    types: [ 'controller', 'view' ]
});

3. I am using Ext 4.0.6 in this example but the same issue is there in 4.0.7

4. Just for the test i have put a line in CellEditingController.js at line number 19:

var formatednumber = Ext.util.Format.number(2.34, '0.0000');

Please let me know if you have more questions.