How to include my own javascript files (crosspost from discussion)

[pixelated]

Sencha Touch won't 'see' third-party JavaScripts once the system has been compiled into production and deployed remotely.

As a result, any third-party JavaScripts become useless and any part of the system that relies on them will cease to function.

During development, they work fine.

This thread (original post) sums it up nicely: http://www.sencha.com/forum/showthre...vascript-files

[mitchellsimoens]

When you generate your app and you develop some app, where do you include the 3rd party code?

[pixelated]

Hi Mitchell, I'm adding it in within the app.json file

    "js": [
        {
            "path": "assets/lib/JavaScriptUtil.js",
            "update": "delta",
            "remote": true
        },
        {
            "path": "assets/lib/Parsers.js",
            "update": "delta",
            "remote": true
        },
        {
            "path": "assets/lib/InputMask.js",
            "update": "delta",
            "remote": true
        },
        {
            "path": "sdk/sencha-touch.js"
        },
        {
            "path": "app.js",
            "bundle": true,
            "update": "delta"
        },

However the only way I've been able to get the libraries to work (after production compilation) is to include them as explicit script tags within index.html:

    <script src="assets/lib/JavaScriptUtil.js"></script>
    <script src="assets/lib/Parsers.js"></script>
    <script src="assets/lib/InputMask.js"></script>

I've tried changing the order of elements in the json file, combining the third-party libs into one file and all manner of other options.

As soon as the system/app has been compiled, third-party libs cease to be seen by the app. However, the libs are loaded as if there is a syntax error in the files, webkit will output an error and the app may even stop working.

For example, the 3 libraries I've included are dependant on each other ( InputMask.js <- Parsers.js <- JavaScriptUtil.js ) After compilation, InputMask.js throws an error in WebKit because it's unable to see Parsers.js (well, it's unable to see the class within Parsers.js). Combining the 3 dependent libs within one file solves that issue but the app still can't see the included classes.

That's why I'm totally confused. WebKit loads the files but the app cannot see their contents.