What is the proper way to load an external javascript in Sencha Touch 2

Question

In my development I need to include third part javascripts; like money.js (http://josscrowcroft.github.com/money.js/)

What is the best 'clean'/'proper' way to achieve it ? Just include it in index.html ?

Answer 1

No. Don't directly add the additional javascript files in the index.html file. That is not the recommended way (though it may work).

Instead, do like this,

• Include the following line in your index.html. microloader is the folder that is shipped with sencha sdk and contains three files mainly, development.js, production.js and testing.js , each one for it's own purpose.

< script id ="microloader" type="text/javascript" src="../../microloader/development.js"> < /script >

• Then, in your <appname> folder, you will need to have a file called as app.json. It will look something like this ..

{
    "name": "Sencha",

     // All javascript files go here ...
    "js": [
        {
            "path": "../../sencha-touch-all-debug.js"
        },
        {
            "path": "app.js",
            "update": "delta"
        },
        { 
            "path": "http://josscrowcroft.github.com/money.js/",
            "update": "delta"  
        }
    ],
    "css": [
        {
            "path": "../../resources/css/sencha-touch.css",
            "update": "delta"
        },
        {
            "path": "resources/css/app.css",
            "update": "delta"
        }
    ],

    .....
    .....
    .....
 }

Answer 2

If you are using Sencha Cmd your index.html may look like this:

<!-- 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>

So after changing app.json you'll need to refresh your app:

sencha app refresh