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

Answer 3

The following worked for me with Ext JS 5.0.0, if the external JavaScript library is local. After the editing, run "sencha app build"

Make changes to three JSON elememtns in app.json. (1) js (2) css (3) resources

{
    "name": "Sencha",

     // All javascript files go here ...
"js": [
    {
        "path": "app.js",
        "bundle": true
    },
    {
        "path": "leaflet/leaflet.js",
        "bundle": true
    }
],
"css": [
    {
        "path": "bootstrap.css",
        "bootstrap": true
    },
    {
        "path": "leaflet/leaflet.css",
        "bootstrap": true
    }
],

    .....
/**
 * Extra resources to be copied along when build
 */
"resources": [""leaflet/leaflet.js","leaflet/leaflet.css"

], ..... ..... }

Answer 4

pure javascript did the trick for me. I just included this block of code in the launch function

var scriptTag = document.createElement('script'); scriptTag.src = 'specify the path here...'; document.body.appendChild(scriptTag);

the scriptTag gets appended into the body of your index file