correct way to add js in sencha architect (ExtJS)?

Question

This thread works well in a mobile app but in a desktop app it would seem I cant add the reference to the external JS in an extjs desktop app.

The instructions from Sencha somehow don't correspond or it doesn't work for me when I try and follow them. So, I am selecting Resources->Library and can see the attribute Include JavaScript (ticked) and Library Base Path:/ext.

The JS file I am using I use in a phone app and its fine - I added it to the app.json in that and compiling the app copies the file over to the target and defers the loading.

In this case with SA I am not seeing the file copied to the target - nor can I follow the instructions with SA 3 that are documented. The only way I can add an external JS is by dropping it onto the filesystem into the ext folder manually. Again, it doesn't appear in the target and certainly errors when I run the app with

Uncaught ReferenceError: hex_sha512 is not defined 

This JS has been used in other apps, is proved and tested but just relates to SA or my wrong use of SA.

Answer 1

My lack of understanding of the instructions or they are not clear:

It would seem the way to do it is take eyes up to the top right of SA and spot the + button as shown in the image.

Add the JS resource and scroll up because it may be hidden behind the property inspector. On setting the url field under properties, the source of the JS appears in the main editing window.

Certainly works fine after the app is built.

Answer 2

The proper way to add a resource in Sencha Architect, regardless of framework, is to add it as a JS resource.

This is most easily done by hitting ctrl-t (or cmd-t on a mac) and typing "js resource" (or some shortened string thereof to get autocompletion)...

Alternatively, you can use the toolbox, click "Resources", and drag out or double click "JS Resource"

These are just different user interfaces to accomplish the same task.

Once you've added your JS resource using one of the above methods, you need to set the URL in the config pane (at bottom right unless you've configured Architect to swap the left and right panes)...

The URL is to be set relative to your project folder. If you copy the JS file into your project root under a folder called "lib" for example, then you'd set the url config to "lib/foo.js" - where foo.js is the filename, of course.

Hope that helps!