/**
+ * @class Ext.app.Controller
*
* 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:
@@ -53,28 +69,28 @@
* One of the most useful parts of Controllers is the new ref system. These use the new {@link 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();
- }
- });
+ * 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 {@link Ext.grid.Panel 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 -
@@ -104,20 +120,20 @@
* 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);
- }
- });
+ * 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
@@ -127,21 +143,21 @@
*
* <u>Further Reading</u>
*
- * For more information about writing Ext JS 4 applications, please see the <a href="../guide/application_architecture">
- * application architecture guide</a>. Also see the {@link Ext.app.Application} documentation.
+ * For more information about writing Ext JS 4 applications, please see the
+ * [application architecture guide](#/guide/application_architecture). Also see the {@link Ext.app.Application} documentation.
*
- * @markdown
* @docauthor Ed Spencer
*/
Ext.define('Ext.app.Controller', {
- /**
- * @cfg {Object} id The id of this controller. You can use this id when dispatching.
- */
mixins: {
observable: 'Ext.util.Observable'
},
+ /**
+ * @cfg {String} id The id of this controller. You can use this id when dispatching.
+ */
+
onClassExtended: function(cls, data) {
var className = Ext.getClassName(cls),
match = className.match(/^(.*)\.controller\./);
@@ -181,6 +197,10 @@ Ext.define('Ext.app.Controller', {
}
},
+ /**
+ * Creates new Controller.
+ * @param {Object} config (optional) Config object.
+ */
constructor: function(config) {
this.mixins.observable.constructor.call(this, config);
@@ -263,24 +283,69 @@ Ext.define('Ext.app.Controller', {
return cached;
},
+ /**
+ * Adds listeners to components selected via {@link Ext.ComponentQuery}. Accepts an
+ * object containing component paths mapped to a hash of listener functions.
+ *
+ * In the following example the `updateUser` function is mapped to to the `click`
+ * event on a button component, which is a child of the `useredit` component.
+ *
+ * Ext.define('AM.controller.Users', {
+ * init: function() {
+ * this.control({
+ * 'useredit button[action=save]': {
+ * click: this.updateUser
+ * }
+ * });
+ * },
+ *
+ * updateUser: function(button) {
+ * console.log('clicked the Save button');
+ * }
+ * });
+ *
+ * See {@link Ext.ComponentQuery} for more information on component selectors.
+ *
+ * @param {String|Object} selectors If a String, the second argument is used as the
+ * listeners, otherwise an object of selectors -> listeners is assumed
+ * @param {Object} listeners
+ */
control: function(selectors, listeners) {
this.application.control(selectors, listeners, this);
},
+ /**
+ * Returns a reference to a {@link Ext.app.Controller controller} with the given name
+ * @param name {String}
+ */
getController: function(name) {
return this.application.getController(name);
},
+ /**
+ * Returns a reference to a {@link Ext.data.Store store} with the given name
+ * @param name {String}
+ */
getStore: function(name) {
return this.application.getStore(name);
},
+ /**
+ * Returns a reference to a {@link Ext.data.Model Model} with the given name
+ * @param name {String}
+ */
getModel: function(model) {
return this.application.getModel(model);
},
+ /**
+ * Returns a reference to a view with the given name
+ * @param name {String}
+ */
getView: function(view) {
return this.application.getView(view);
}
});
-