Controllers are the glue that binds an application together. All they really do is listen for events (usually from -views) and take some action. Here's how we might create a Controller to manage Users:
- -Ext.define('MyApp.controller.Users', {
- extend: 'Ext.app.Controller',
-
- init: function() {
- console.log('Initialized Users! This happens before the Application launch function is called');
- }
-});
-The init function is a special method that is called when your application boots. It is called before the -Application's launch function is executed so gives a hook point to run any code before -your Viewport is created.
- -The init function is a great place to set up how your controller interacts with the view, and is usually used in -conjunction with another Controller function - control. The control function -makes it easy to listen to events on your view classes and take some action with a handler function. Let's update -our Users controller to tell us when the panel is rendered:
- -Ext.define('MyApp.controller.Users', {
- extend: 'Ext.app.Controller',
-
- init: function() {
- this.control({
- 'viewport > panel': {
- render: this.onPanelRendered
- }
- });
- },
-
- onPanelRendered: function() {
- console.log('The panel was rendered');
- }
-});
-We've updated the init function to use this.control to set up listeners on views in our application. The control -function uses the new ComponentQuery engine to quickly and easily get references to components on the page. If you -are not familiar with ComponentQuery yet, be sure to check out THIS GUIDE for a full explanation. In brief though, -it allows us to pass a CSS-like selector that will find every matching component on the page.
- -In our init function above we supplied 'viewport > panel', which translates to "find me every Panel that is a direct -child of a Viewport". We then supplied an object that maps event names (just 'render' in this case) to handler -functions. The overall effect is that whenever any component that matches our selector fires a 'render' event, our -onPanelRendered function is called.
- -Using refs
- -One of the most useful parts of Controllers is the new ref system. These use the new Ext.ComponentQuery to -make it really easy to get references to Views on your page. Let's look at an example of this now:
- -Ext.define('MyApp.controller.Users', {
- extend: 'Ext.app.Controller',
-
- refs: [
- {
- ref: 'list',
- selector: 'grid'
- }
- ],
-
- init: function() {
- this.control({
- 'button': {
- click: this.refreshGrid
- }
- });
- },
-
- refreshGrid: function() {
- this.getList().store.load();
- }
-});
-This example assumes the existence of a Grid on the page, which contains a single button to -refresh the Grid when clicked. In our refs array, we set up a reference to the grid. There are two parts to this - -the 'selector', which is a ComponentQuery selector which finds any grid on the page and -assigns it to the reference 'list'.
- -By giving the reference a name, we get a number of things for free. The first is the getList function that we use in -the refreshGrid method above. This is generated automatically by the Controller based on the name of our ref, which -was capitalized and prepended with get to go from 'list' to 'getList'.
- -The way this works is that the first time getList is called by your code, the ComponentQuery selector is run and the -first component that matches the selector ('grid' in this case) will be returned. All future calls to getList will -use a cached reference to that grid. Usually it is advised to use a specific ComponentQuery selector that will only -match a single View in your application (in the case above our selector will match any grid on the page).
- -Bringing it all together, our init function is called when the application boots, at which time we call this.control -to listen to any click on a button and call our refreshGrid function (again, this will -match any button on the page so we advise a more specific selector than just 'button', but have left it this way for -simplicity). When the button is clicked we use out getList function to refresh the grid.
- -You can create any number of refs and control any number of components this way, simply adding more functions to -your Controller as you go. For an example of real-world usage of Controllers see the Feed Viewer example in the -examples/app/feed-viewer folder in the SDK download.
- -Generated getter methods
- -Refs aren't the only thing that generate convenient getter methods. Controllers often have to deal with Models and -Stores so the framework offers a couple of easy ways to get access to those too. Let's look at another example:
- -Ext.define('MyApp.controller.Users', {
- extend: 'Ext.app.Controller',
-
- models: ['User'],
- stores: ['AllUsers', 'AdminUsers'],
-
- init: function() {
- var User = this.getUserModel(),
- allUsers = this.getAllUsersStore();
-
- var ed = new User({name: 'Ed'});
- allUsers.add(ed);
- }
-});
-By specifying Models and Stores that the Controller cares about, it again dynamically loads them from the appropriate -locations (app/model/User.js, app/store/AllUsers.js and app/store/AdminUsers.js in this case) and creates getter -functions for them all. The example above will create a new User model instance and add it to the AllUsers Store. -Of course, you could do anything in this function but in this case we just did something simple to demonstrate the -functionality.
- -Further Reading
- -For more information about writing Ext JS 4 applications, please see the -application architecture guide. Also see the Ext.app.Application documentation.
-