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.
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.
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.
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,
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
If the load is unsuccessful,
you will see the message "Ext.Direct Remoting Specification failed to load."
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
(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
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.