extjs and Translation

Question

I have token a look at the Sencha's official example, now I want to applicate the translation to my application. In the example I have followed the two files.js and the file.html are in the same directory, but my application follows the MVC architecture, so it differs. I have a js file that contains words to translate:

if (Ext.app.ContactForm) {
Ext.apply(Ext.app.ContactForm.prototype, {
    formTitle: 'Contact Informatie (Dutch)',
    firstName: 'Nom',
    lastName: 'Prénom'
});
}

And my application contains just one file.html 'app.html', so I don't know where to put the file.js, in the same directory of app.html or in the view folder! And how it can be readable bye all the application.

Answer 1

One way is, to include one file with all your overrides in the index.html! Like you would do it with the offical locale-files (ext/locale).

    <script type="text/javascript" src="ext-4/locale/ext-lang-de.js"> </script> 

This works as long as you don't build the application.

On one day or an other you want to build you application, so I suggest a different way!

Problem: I found out, that if I am building my application (with the sencha tools -> app-all.js) the localization didn't work when I first loaded the application. The reason is, that the overrides are applied after the rendering process of the elements.

Create a file named e.g. myOverrides.js

Ext.define('MyApp.myOverrides', {    

statics: {
    doOverride: function() {

        Ext.apply(Ext.app.ContactForm.prototype, {
            formTitle: 'Contact Informatie (Dutch)',
            firstName: 'Nom',
            lastName: 'Prénom' 
        });
}
});

To get it applied before the initialization I made following changes to the app.js and removed it from the index.html.

1. Turn of autoCreateViewport Reason: Now the launch function of the app will be called before the rendering process starts!

2. in the launch function of the app.js do following

   launch: function() {
       ...
       //Injecting the overrides
       Ext.Loader.injectScriptElement('app/myOverride.js', Ext.emptyFn);        
       MyApp.myOverride.doOverride();
       Ext.create( "MyApp.view.Viewport");  //We have to create the viewport manually
   }
   

As I said before this worked for me in the development and the production mode (whit the app-all.js) .