The ext-locale-loader is used to dynamically load the required resources files for your classes + the ExtJS locale file. Your existing ExtJS 4 MVC application will be able to be localized very easily, without too many steps (except, of course, translating).

You need ExtJS 4.x, and the demonstration will look for it in the folder /ext.

You can run the example using either of those files hosted on a web server:

• ext-locale-loader.html
• ext-locale-loader-fr.html

The ext-locale-loader is disabled on the first one and enabled on the second one. It's set to the 'fr' (french) language, so you should be able to notice a difference :)

The initialization code must be executed along with the Ext.Loader.setConfig (before or after):

Ext.Loader.setLocale({

	enabled: true, // false by default
	// extLocalePath: 'ext-4.0.2/locale' if you want to use ExtJS locale file (check the end of the README)
	language: 'fr',
	localizedByDefault: false,
	types: [ 'controller', 'view' ]
	
});	

This configuration will enable the dynamic localization, using the 'fr' locale, for the controllers and views (or more specifically, classes' namespaces which contain the application name + . + type).

Let's say we have a app.controller.Coordinator. The resources would be ideally found at the beginning, and declared this way:

Ext.define('app.controller.Coordinator', {

	localized: true,
	xDeleteCurrentTabConfirmation: "Do you really want to remove this tab?"
	
	[...]
	
});

Please note that the resource attributes MUST start with the letter x. The localized attribute should be set to true if it's a localizable class, otherwise to false. You can play with this attribute differently depending on how you configured localizedByDefault during the initialization. It's recommended to write the content of those resources in English here, as they will be the ones used by default.

The localization files would be found in this folder: {appFolder}/locale/{language}. For instance, with the previous configuration, it would be found in app/locale/fr.

Each of them contain a class which redefine the resources (which are used in the normal classes). For instance, for a app.controller.Coordinator, the localization file would be app/locale/fr/controller/Coordinator.js and would contain something like:

Ext.define('app.locale.fr.controller.Coordinator', {
	xDeleteCurrentTabConfirmation: "Souhaitez-vous vraiment supprimer cet onglet ?"
});

• Using "ext.js" only (and not ext-all), the ExtJS locale file will not be applied properly. It doesn't affect the Application's classes though, so those ones will still be translated. Thanks for your help on that issue if you find any solution.

Copyright (c) 2011 Jordy Theiller, released under the MIT license.