Architect 2 Sencha Docs

Controllers Reference

Controllers are the glue that binds the parts of an application together, implementing the business rules and logic that make your application behave as intended. They listen for events (usually from Views) and take some action based on the event, whether that is rendering Views, instantiating Models, or performing some other application logic. For example, if your app contains a tappable Logout button, a Controller listens to the button's tap event and takes the appropriate action, such as sending a move to another user in a game. A Controller lets Views handle the display of data and Models handle the loading and saving of data.

Working with Controllers in Architect

In Sencha's MVC package, Controllers manage Views. Views do not call out to Controllers to invoke methods. Views fire events, and Controllers respond to them. With Architect, you associate a View with a Controller by selecting the Controller in the Inspector, navigating to the Views config in the Config panel, and selecting from the list of available Views that shown in the dropdown list that appears there, or you can type the name of the View you want to select. Note that you have to add and build Views to your project before you can associate a View with a Controller.

You enable a Controller to respond to an event by adding a Controller action to the controller. using the Config panel:

  • In the Inspector, select the Controller to use
  • Go to the Config panel and navigate to Actions
  • Click the add button ("+") to the right under Value, and select Controller Action.
  • You will be prompted to choose a target type (a View) and an event for the action.

Once you choose the target View and event, Architect has everything it needs to subscribe to all user interface controls of that type.

For example in a Touch project, say you choose Ext.Button as the target type and the tap event. Architect automatically generates an onButtonTap method (which you can rename). It also generates a controlQuery of button. controlQuery specifies which UI controls the Controller needs monitor. It is akin to a CSS selector that works with components instantiated on the page. Double clicking the Controller action in the Inspector opens Code View for the action, where you can add your own code to determine the behavior that is triggered when a user taps the button.

Adding Controllers

Use the Inspector to add Controllers to either Ext JS or Sencha Touch projects: click the add button ("+") at the top right of the Inspector and select Controller from the list of components. Architect displays the Controller ("MyController") under the Controller node. From there, use the Config Panel to add functionality to the Controller. See the next section to learn how to do that.

You can also add Controllers through the Toolbox, where Controller, Controller Action, and Controller Reference are all available as standard components. This is not the recommended practice.

Main Controller configs

To set configs for a Controller, select that Controller in the Inspector, then open the Config panel.. At the top of the Config panel, select the Show all (advanced) configs icon to see all available Controller configs. The most commonly used configs for both Ext JS and Sencha Touch projects are:

Actions. Click the add button next to Actions in the Config panel to add actions to a Controller. Select either Controller Action or Application Action. For Controller Action, follow the instructions in Config to choose a target type from the list of View components and an event for the action. Double-click the Controller Action in the Inspector to add custom code to the Action. Select (single-click) the Controller Action and Application Action in the Inspector to see available configs for them. Key Action configs are targetType, where you set the type of component targeted by the Action, and name, which binds an event to the target.

References. Click the add button next to References in Config to add a reference to a Controller, then follow the directions in Config to enter a name for the reference and a selector. Click the reference in the Inspector to edit these values in Config (the name is contained in the ref config). You should use the exact name of a View component in the application for the name and selector to reference only that specific View.

init. Click the add button next to init in Config to add init functions to a Controller. An init function sets up how a Controller interacts with a View, and is usually used in conjunction with another Controller function -- control. Control helps the Controller listen for events and take some action with a handler function. Double-click the init function in the Inspector to open the Architect code editor and add the code needed to add functionality to the init, including control and other functions.

onLaunch. Click the add button next to Actions in Config to add onLaunch functions to a Controller. Double-click the onLaunch function in the Inspector to open the Architect code editor and add the code needed to add functionality.

Controller configs for Touch projects

Controller configs are slightly different for Touch projects. Here are the additional main configs Architect makes available for mobile apps:

Before Filters. Click the add button next to Before Filters in Config to add a before filter, then select in the Inspector to see available configs. These are used to define filter functions that run before the function specified in the route. Examples include user authentication/authorization for specific actions or loading classes that are not yet on the page.

Routes. Click the add button next to Routes in Config to add a route, then select in the Inspector to see available configs. These are used to specify the routes of interest to a Controller, which provides history support within an app as well as the ability to deeply link to any part of an app for which we provide a route.

Other available configs

Architect also makes the following configs available for Controllers. Typically, these parts of your application are set at the application level. You only set them for Controllers if you want them to be available only for a particular Controller and not to be available at the application level:

Functions. Click the add button next to Functions in Config to add functions to the Controller. Select the function in the Inspector to view all function configs in the Config panel.

Models. Binds Models to the Controller. Names of Models added to a project are displayed as a scrolling list in the Value field on the right of Config; open the list by clicking the field (which by default includes the text "(none)").

stores. Binds stores to the Controller. Names of stores added to a project are displayed as a scrolling list in the Value field on the right of Config; open the list by clicking the field (which by default includes the text "(none)").

Views. Binds Views to the Controller; only top-level Views can be selected. Names of a project's top-level Views are displayed as a scrolling list in the Value field on the right of Config; open the list by clicking the field (which by default includes the text "(none)")

Additional resources

For more details about using Controllers in Architect, see the following: