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.
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:
- The code is probably clumsy and it has not been optimized in any way.
- Localization of Ext.Date needs to be redesigned.
- 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.
- List of columns in grid column menu does not translate reliably. Needs debugging.
- 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:
overrides/Component.js overrides/form/field/ComboBox.js app/store/I18n.js resources/locales.jsonIf you want to see the example code, login or sign-up. Free membership is available.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015