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:
- Library Resources
- CSS Resources
- Direct Resources
In Architect 2.2 and later, 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 from
- 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.
Upgrading The Library
Architect makes every attempt to allow users to upgrade between minor revisions of the same framework e.g. 4.0 to 4.1. 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 CSS Resource to include a CSS file with custom styles for your view components. After adding a CSS Resource to the Resources node in the inspector, set its url config to the location of your CSS file. You can also optionally give it an id attribute.
Once you have configured your CSS Resource, Architect will attempt to load it. If successful, it will apply your custom CSS to Architect's rendered canvas so you can see your custom styles while designing your app. If your CSS file gets modified by some other process behind the scenes, for example a SASS/Compass recompile, you can have Architect reload and reapply it to the canvas by by clicking the "Refresh CSS" button above the canvas.
Warning: By loading and applying your CSS within the canvas, it is possible that your custom styles can override base framework styles; this could break the display of the components on the canvas. Use appropriate caution!
If you specify a relative path in the url config, it will be resolved relative to the main app.html file when deployed, and relative to the configured URL Prefix within the Architect canvas. A relative path will also allow you to edit the contents of the file within Architect's code editor; select the CSS Resource in the inspector and switch to code view, then edit the CSS code to update the target .css file and reapply it to the canvas. If no file exists at the specified local path, Achitect creates it when you save or build the project.
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 2.2 and later supports instantiating a Class from a Resource. This enables a user to specify a createAlias on any component that is implemented in Base.js (so view, model, store, or controller) that is a child. A Top level components must specify what IT EXTENDS FROM, although it must also maintain information about its ancestor so that it can be rendered.
For example, a DynamicGridPanel might extend from a GridPanel. To create a top-level class called MyCustomGrid that extends from DynamicGridPanel, drag out a GridPanel from the toolbox and set the extend to DynamicGridPanel. This allows the component to continue using all of the validation rule related to parents and children and to continue rendering.
See Saving and Sharing Projects 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.