Clever Geek Handbook

Ext.define order ()

I am using Extjs5 and Sencha Cmd and I am working on an l10n engine (on top of gettext) to implement localization.

Let's say I want to offer a translation function for each class in my project named _ () .

In every controller, view, model, and every class, I would like to write something like this:

Ext.define('FooClass', {
  someStrings: [
    _('One string to translate'),
    _('A second string to translate'),
    _('Yet another string to translate')
  ]
});

First problem: _ () must exist before the whole Ext.define () project of my project is executed. How to do it?

Second problem: _ () looks in "directories" for JavaScript files generated from .po files (gettext). Thus, these directories must be loaded before the entire Ext.define () application is executed. _ () ​​Is a synchronous function, it must return the translated string immediately.

+3


source to share


2 answers


Define a translation function outside the ExtJs project area and enable it before the Ext application is included in index.html. The scripts are loaded in the correct order and the function _()

is ready to be used throughout the project.

i18n.js

function _() {
    // do the translation
}


index.html

<html>
    <head>
        <script src="i18n.js"></script>
        <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
    </head>
    <body>

    </body>
</html>
+1


source


Edit regarding edited question

You have at least two ways to load external libraries:

Ext.Loader.loadScript

loadScript( options )

Loads the specified URL script and makes incoming calls. If this method is called before Ext.isReady, the loading script will be delayed going to ready. This can be used to load arbitrary scripts which may contain additional calls to Ext.require.

Parameters

options : Object/String/String[] //The options object or simply the URL(s) to load.
// options params:
url : String //The URL from which to load the script.
onLoad : Function (optional) //The callback to call on successful load.
onError : Function (optional) //The callback to call on failure to load.
scope : Object (optional) //The scope (this) for the supplied callbacks.

If you still run into problems, you can force the bootloader to do the sync download:

syncLoadScripts: function(options) {
    var Loader = Ext.Loader,
        syncwas = Loader.syncModeEnabled;
    Loader.syncModeEnabled = true;
    Loader.loadScripts(options);
    Loader.syncModeEnabled = syncwas;
}

Place this in a file right after the ExtJS library and before the generated one app.js

.



Old answer

If necessary, you need a class that should solve your problems. Unless you require the sencha command / ExtJS class system cannot know you need a specific class.

Ext.define('Class1', {
  requires: ['Class2'], 
  items: [
    {
      xtype: 'combo',
      fieldLabel: Class2.method('This is a field label')
    }
  ]
});

For further reading, see:

requires

requires : String[]

List of classes to be loaded before instantiating the class. For example:

Ext.define('Mother', {
    requires: ['Child'],
    giveBirth: function() {
        // we can be sure that child class is available.
        return new Child();
    }
});

uses

uses : String[]

List of additional classes to load along with this class. These are not necessarily loaded prior to the creation of this class, but are guaranteed to be available before the Ext.onReady listeners are called. For example:

Ext.define('Mother', {
    uses: ['Child'],
    giveBirth: function() {
        // This code might, or might not work:
        // return new Child();

        // Instead use Ext.create() to load the class at the spot if not loaded already:
        return Ext.create('Child');
    }
});
+2


source






More articles:


All Articles