Clear Up
SharpKit Reference

ControllerConfig Class

Namespace: Ext.app

Base Types

System.Object

Constructors

Name Description
ControllerConfig(Object[])

Fields

Name Description
id The id of this controller. You can use this id when dispatching.
listeners A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from Ext JS Components While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:
new Ext.panel.Panel({
            width: 400,
            height: 200,
            dockedItems: [{
            xtype: 'toolbar'
            }],
            listeners: {
            click: {
            element: 'el', //bind to the underlying el property on the panel
            fn: function(){ console.log('click el'); }
            },
            dblclick: {
            element: 'body', //bind to the underlying body property on the panel
            fn: function(){ console.log('dblclick body'); }
            }
            }
            });
            
models Array of models to require from AppName.model namespace. For example:
  Ext.define("MyApp.controller.Foo", {
            extend: "Ext.app.Controller",
            models: ['User', 'Vehicle']
            });
            
This is equivalent of:
  Ext.define("MyApp.controller.Foo", {
            extend: "Ext.app.Controller",
            requires: ['MyApp.model.User', 'MyApp.model.Vehicle'],
            getUserModel: function() {
            return this.getModel("User");
            },
            getVehicleModel: function() {
            return this.getModel("Vehicle");
            }
            });
            
refs Array of configs to build up references to views on page. For example:
  Ext.define("MyApp.controller.Foo", {
            extend: "Ext.app.Controller",
            refs: [
            {
            ref: 'list',
            selector: 'grid'
            }
            ],
            });
            
This will add method getList to the controller which will internally use Ext.ComponentQuery to reference the grid component on page. The following fields can be used in ref definition:
  • ref - name of the reference.
  • selector - Ext.ComponentQuery selector to access the component.
  • autoCreate - True to create the component automatically if not found on page.
  • forceCreate - Forces the creation of the component every time reference is accessed (when get<REFNAME> is called).
  • stores Array of stores to require from AppName.store namespace and to generate getter methods for. For example:
      Ext.define("MyApp.controller.Foo", {
                extend: "Ext.app.Controller",
                stores: ['Users', 'Vehicles']
                });
                
    This is equivalent of:
      Ext.define("MyApp.controller.Foo", {
                extend: "Ext.app.Controller",
                requires: ['MyApp.store.Users', 'MyApp.store.Vehicles']
                getUsersStore: function() {
                return this.getView("Users");
                },
                getVehiclesStore: function() {
                return this.getView("Vehicles");
                }
                });
                
    views Array of views to require from AppName.view namespace and to generate getter methods for. For example:
      Ext.define("MyApp.controller.Foo", {
                extend: "Ext.app.Controller",
                views: ['List', 'Detail']
                });
                
    This is equivalent of:
      Ext.define("MyApp.controller.Foo", {
                extend: "Ext.app.Controller",
                requires: ['MyApp.view.List', 'MyApp.view.Detail'],
                getListView: function() {
                return this.getView("List");
                },
                getDetailView: function() {
                return this.getView("Detail");
                }
                });
                
    © Copyright 2005-2011 SharpKit. All rights reserved.