15

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 ?

Saurabh Gokhale
  • 53,625
  • 36
  • 139
  • 164
Disco
  • 4,226
  • 11
  • 58
  • 76

4 Answers4

18

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"
        }
    ],

    .....
    .....
    .....
 }
Moak
  • 12,596
  • 27
  • 111
  • 166
Saurabh Gokhale
  • 53,625
  • 36
  • 139
  • 164
  • 1
    Elegent solution if it was to work ... i've tried both in testing/production builds; it doesn't get loaded :( – Disco Apr 26 '12 at 14:14
  • Try writing it directly in `index.html`. The above solution works perfectly for me, when it comes to use some local additional js files. – Saurabh Gokhale Apr 26 '12 at 14:19
  • Hmmm..Loading external javascript files works in index.html. Probably, that's why we need to write the following script `` in the index.html to use Google maps in our application. Anyway, you'r welcome :-) – Saurabh Gokhale Apr 26 '12 at 14:26
  • putting it in index.html would work but then it'll slow down the startup load time since it would have to load the script right away. Doing it as roadRunner suggests has the advantage of deferred loading (I think??) – ABCD.ca Jul 13 '12 at 22:38
  • Any idea about this problem? http://stackoverflow.com/questions/14507760/how-to-instruct-sencha-sdk-tools-to-bundle-other-js-files-specified-in-app-json – Shiplu Mokaddim Jan 26 '13 at 15:26
3

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
alexbrina
  • 131
  • 6
1

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.

Brugui
  • 574
  • 6
  • 20
JefferinJoseph
  • 151
  • 2
  • 6
0

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"

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

user3739522
  • 1