First of all, if you haven’t yet read article Localization of Ext Applications, do not continue here but read it now please (or the example might not make any sense).

Now, this example is somehow different from others for other examples demonstrate how to use various aspects of Ext, best coding practices or practical solutions – they illustrate how to use what we have. This one shows what we could have. It tries to implement an ideal localization system and it is in the development stage of “concept proof.”

It is not complete and it has issues, nevertheless, when completed and debugged, it might become the localization platform we always dreamed of.

Note: The idea is not mine but, I think, Mitchell Simoens is the author of the fiddle that inspired me. I have simplified it and made it more coherent with the ideals I describe in the above article.

Live Demo

Open example in new window.

How it works

The entire system is implemented as overrides of many Ext components (and some other classes). This way it is separate from the main application that does not need any, or only a few changes.

There is a special setter created for every localizable class property that is responsible for translating the property value to another language. The properties for localization are listed in the new configuration option localeProperties:[] introduced by the overrides. The current locale is saved per each localizable property.

The translations are kept in a (configurable) store. The idea is that the records do not have ids that would be significant for the translation logic. When setter runs it searches the text in the current locale field and, if the record is found, uses the translation to the desired language. This way it is not necessary to change anything in the application texts. Also, there we can have many languages used at the same time.

It is also very easy to provide a grid for editing this store so translators must only translate plain texts without any programming constructs. They can translate on-line and see their work in action immediately.

New locale related methods are created by overrides: setLocale, getLocale and cascadeLocale.

Known issues

  1. The code is probably clumsy and it has not been optimized in any way.
  2. Localization of Ext.Date needs to be redesigned.
  3. Date Field and Date Picker need analysis and debugging. Note: Date picker is a very unfortunate, poorly written component. It would deserve a complete rewrite from scratch.
  4. List of columns in grid column menu does not translate reliably. Needs debugging.
  5. Message box and possibly also other components have not been addressed at all.

Example Files (relative to example root)

The example has been initially generated with sencha generate app in a workspace. The following list contains only the relevant files:

If you want to see the example code, login or sign-up. Free membership is available.
Follow me:
Latest posts by saki (see all)

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?