Architect Sencha Docs

Using Resources

Resources are "extra" files that your application needs to work properly. For example, a custom CSS for styling your app's visual components is a Resource, as is a JavaScript utility file that contains business logic for the application. Architect lets you include these external Resources by adding them as items under the Resources node through the Inspector.

Add new Resources to your project either by dragging them from the Resources section in the Toolbox, or by clicking the Add button ("+") above the Inspector and choosing the type of Resource to add. You can control the order in which your app loads Resources by dragging them up or down the Inspector.

Architect recognizes the following types of Resources, each of which is discussed individually here:

Themes and CSS/SCSS files are also included as Resources in your project.

In Architect, you can instantiate a class from a Resource. Instructions for this are included at the end of this guide.

Library Resource

Every project has a special "Library" Resource, which cannot be removed. This Resource contains information about where the base Ext JS or Sencha Touch library's JS and CSS files are located. By default, they are set to load from a location on Sencha's CDN but you can change it to load from a different location, for example a custom build of the library or a path on your local network.

Library Options

Like other Resources, you can configure library options by selecting Library in the inspector and changing them in the config panel. Some of the options include:

  • Change the location to load the library
  • Include the debug version of the library JS
  • Include (or not) the the library JS
  • Include (or not) the library CSS

These configurations allow you to do things like use a complete custom theme, deliver the library from a different domain, or enable the debug version of the library. For details about using a complete custom theme, see Application Styling.

Upgrading the Library

Architect makes every attempt to allow users to upgrade between minor revisions of the same framework such as Ext JS 4.1 to 4.2. For instance in Architect 2.2, support was added for Ext JS 4.2. Your 4.1 projects can now be upgraded to 4.2 by right clicking on the Library Resource in the project inspector and choosing "Upgrade to Ext42". An upgrade performs necessary transformations to your configs and settings to bring it up to par for the new framework. Typically this is minimal.

Be aware that Architect doesn't support downgrading to a lesser framework once you've done the upgrade. An archive of the project is saved during the upgrade so you can revert to that if needs be.

JavaScript Resources

Use a JavaScript Resource to include a JavaScript file, such as a third-party utility library in your application. After adding a JavaScript Resource to the Resources node in the inspector, set its url config to the location of your JavaScript file. You can also optionally give it an id attribute or set it to use deferred execution by checking the defer config.

Architect will not load custom JavaScript Resources in the canvas, they will only be included in your deployed application.

If you specify a relative path in the url config, it will be resolved relative to the main app.html file when deployed. A relative path also allows you to edit the contents of the file within Architect's code editor; select the JS Resource in the inspector and switch to code view, then edit the Javascript code to update the target .js file. If no file exists at the specified local path, Architect creates it when you save or build the project.

Direct Resource

Use a Direct Resource to configure the location of an external Ext.Direct API descriptor. This is required if you wish to use a Direct Proxy in your data stores. You can only add one Direct Resource to a project.

After adding the Direct Resource to the Resources node in the inspector, set its url config to the location of the Ext.Direct API. This URL must return a proper Direct REMOTING_API descriptor. Architect attempts to load it, and, if the response is valid, displays the message "Successfully Updated Ext.Direct API"; any Direct Proxy within your application will now provide the API's methods as options in its directFn config. If the load is unsuccessful, you will see the message "Ext.Direct Remoting Specification failed to load."

Editing Resources

Architect enables editing of certain Resources using the code editor. If the Resource is local, you can edit it in Architect by either double clicking on the Resource or selecting Edit Code in the Resource's context menu or in the Action menu. A Resource is locked when you first edit it, unless it is a new file.

Selecting the Reload button or action in the Resource's context menu (see the image below) reloads the Resource's code from the source. Warning: this action overwrites current changes.

Instantiating a Class from a Resource

Architect supports instantiating a Class from a Resource. This enables a user to specify a createAlias on any child component that is implemented in Base.js (in other words, part of a View, Model, Store, or Controller). A top level component must specify the class from which it extends and must maintain information about its ancestor so that it can be rendered.

For example, to create a top-level class called MyCustomGrid that uses a DynamicGridPanel that extends from a Grid Panel, drag out a GridPanel from the toolbox and set the extend to DynamicGridPanel. This allows the component to continue using all of the validation rules related to parents and children and to continue rendering.

See Working with Classes for more information about using the createAlias feature.

Google Maps API Resource (Sencha Touch only)

Use a Google Maps API Resource to include the Google Maps API in your Sencha Touch app. This is required if you wish to use the Map component; Architect automatically adds it to the Resources when you add a Map component to your project. You can only add one Google Maps API Resource to a project.

The Resource is configured automatically with the standard Google Maps API v3 URL with sensors enabled. You can customize the URL according to Google's documentation if you wish to specify different options, for instance adding your API key.