Is there a way to call a function before the dependencies are loaded in Sencha Touch application

Question

Sencha Touch application has requires:[] option to specify the list of controllers and models and stores etc that are loaded that we need for the application to work but is there a way to execute something that we need even before the loading of the dependencies. FOr e.g. I need the Browsers Language even before the loading of all dependencies. So is it possible to do?

score 1 · Answer 1 · answered Sep 03 '14 at 05:19

Keep in mind: Sencha Touch is nothing but JavaScript. You can add some script in your index.html in front of the script tag that loads the sencha microloader.

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>FNL</title>
    <style type="text/css">
        <!-- sencha stuff -->
    </style>

    <script id="myScript" type="text/javascript" src="myScript.js"></script>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src=".sencha/app/microloader/development.js"></script>
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

Yes but this is something that is out of sencha boundaries. Need to make it happen at application level. Anyways, I think this is a simple approach and might help some other reader. Upvoted. — Nick Div, Sep 03 '14 at 18:37

score 1 · Answer 2 · answered Sep 03 '14 at 07:29

1

I added some lines to the ST Microloader:

    this.css = processAssets(manifest.css, 'css');

    // Load language strings
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'api/Settings', false);
    xhr.send(null);
    var settings = eval("(" + xhr.responseText + ")");
    Lang = settings.Translations[0];
    Options = settings.Options[0];
    // End Load Language Strings

    this.js = processAssets(manifest.js, 'js');

answered Sep 03 '14 at 07:29

Alexander

19,906
19
75
162

Upvoted, but is it recommended to make changes to the microloader? – Nick Div Sep 03 '14 at 18:40
Nope, they don't recommend it - they recommend to use a store for the language strings and some thousand lines of `panel.setTitle()`, `label.setText()` etc. to put the strings into the UI. – Alexander Sep 04 '14 at 07:12
I forgot their second recommendation: I should compile the project once for every language, with the language strings hardcoded in each of the app.js files. – Alexander Sep 04 '14 at 07:14
Language was just an example. Making change in lib files holds you back while upgrading to newer versions. Lets say sencha updates the library and you do an update, extra code in the lib goes for a toss. You have to keep track of what to copy paste every time you upgrade. And most of their recommendations might not be right for all languages but their recommendations are definitely best for their products. – Nick Div Sep 04 '14 at 12:02
I don't see how three thousand lines of `label.setText()` should make sense in any language. There's a long thread in sencha forum on how necessary better localization support is. It started back in Ext 2, but sencha did not come up with anything. – Alexander Sep 04 '14 at 12:07

score 1 · Answer 3 · answered Sep 03 '14 at 08:45

In ExtJS i accomplished this by loading a Dependency class first

Ext.require([
   'MyApp.Dependencies', 
    .. 
]);

so the Dependecies class is loaded before all controllers which looks like this

Dependencies.js:

Ext.define('MyApp.Dependencies', {  

    singleton: true,

    init: function() {
        // load translation data
    }

});

MyApp.Dependecies.init();

and for completition my init function looks something like this:

inti: function(){
    function loadScriptSync(url) {
        var xhrObj = new XMLHttpRequest();
        // open and send a synchronous request
        xhrObj.open('GET', url, false);
        xhrObj.send('');
        // add the returned content to a newly created script tag
        var se = document.createElement('script');
        se.type = "text/javascript";
        se.text = xhrObj.responseText;
        document.getElementsByTagName('head')[0].appendChild(se);
    }

    var language =  this.getLanguage();

    loadScriptSync("resources/locale/locale." + language + ".js");
}

Hmm, interesting. This looks like something that might work. Let me check. Thanks, upvoted. — Nick Div, Sep 03 '14 at 18:39

Is there a way to call a function before the dependencies are loaded in Sencha Touch application

3 Answers3