Architect 2 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:

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.

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.

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.

CSS Resources

Use a CSS Resource to include a CSS file with custom styles for your view components. You can create your own custom theme and apply it to your application with the following steps:

  • Include the CSS file for your theme as a CSS resource.
  • Set its url config to the location of your CSS file.
  • Optionally, configure an id attribute for the CSS resource.
  • In the Project Inspector, uncheck "Include Library CSS".

Your theme should be applied to the Canvas.

After you configure your CSS Resource, Architect attempts to load it. If successful, Architect applies your custom CSS to its rendered canvas so you can see your custom styles while designing your app. If your CSS file gets modified by another process behind the scenes, for example a Sass/Compass recompile, you can have Architect reload and reapply it to the canvas 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 also allows 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, Architect creates it when you save or build the project.

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 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 that extends 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.

Themes

A theme is a set of CSS styles specific to a device or platform. You can create a theme using Sass.

To set a theme in Architect:

  1. Click Resources -> Library in the Project Inspector.
  2. In the Config Panel, click on theme
  3. Select the theme you want to use from the drop-down menu.

    Possible Sencha Ext JS project "theme" property values:

    • access - Accessibility theme. Extends ext-theme-classic.
    • classic - The classic blue Ext JS theme. (See first note below.)
    • gray - Gray theme. Extends ext-theme-classic.
    • neptune - Modern borderless theme. Extends ext-theme-neutral.

    Possible Sencha Touch project "theme" property values:

    • Android - Android devices
    • Apple - iOS devices
    • BlackBerry - BlackBerry 10 devices - Causes the ActionSheet component to come in from the side like the BlackBerry cross-cut menu
    • Default - A combination of the Touch base and default themes
    • Windows - Internet Explorer 10 devices such as Windows Phone and Microsoft Surface

Notes

  • The Ext JS classic theme extends ext-theme-neutral, which extends ext-theme-base and contains the vast majority of configurable style rules. Most of the variables that are available for configuring the appearance of Ext JS components are defined in ext-theme-neutral. The ext-theme-base theme is the base theme for all other themes, and the only theme package that does not have a parent theme. The base theme contains the bare minimum set of CSS rules that are absolutely required for Ext JS components and layouts to work correctly.

  • For more information on Ext JS themes, see Theming.

  • For more information about Touch themes, see Theming.

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.