ViewController Observe Configuration

[Back to Additional Features] (Additional-Features)

ExtJS 0.8 adds the ability to easily attach event listeners to injected objects in ViewControllers using the observe property. In its most basic form, this looks like:

Ext.define("DeftQuickStart.controller.MainController", {
  extend: "Deft.mvc.ViewController",
  inject: ["companyStore"],
  
  config: {
    companyStore: null
  },
  
  observe: {
    // Observe companyStore for the update event
    companyStore: {
      update: "onCompanyStoreUpdateEvent"
    }
  },
  
  init: function() {
    return this.callParent(arguments);
  },
  
  onCompanyStoreUpdateEvent: function(store, model, operation, fieldNames) {
    // Do something when store fires update event
  }

});

This works for both built-in ExtJS events or events you dispatch yourself from any object that uses the Ext.util.Observable mixin. As a result, this can be a very useful way to allow different ViewControllers to communicate.

For example, you can create an Observable object to encapsulate some part of the state of your application. If you're building a data-mining application, information like the currently selected search criteria could be wrapped up in a SearchContext object. This Context object might be a singleton object that is injected into several different ViewControllers. Using the observe feature, it's very easy to add listeners and respond when the state of the application changes.

The observe configuration supports any or all of these structures:

observe: {

  // Standard configuration
  companyStore: {
    "update": onCompanyStoreUpdateEvent
  },
  
  // Multiple observed events on one object
  searchContext: {
    "criteriaChanged": onSearchCriteriaChanged,
    "criteriaCleared": onSearchCriteriaCleared
  },
  
  // Observing a nested property
  "userStore.proxy.reader": {
    exception: "onUserStoreReaderException"
  },
  
  // Multiple observed events with event constants and listener options
  editContext: [
    {
      event: EditContextEvents.EDIT_START,
      fn: "onEditStart",
      single: true
    }, {
      event: EditContextEvents.EDIT_COMPLETE,
      fn: "onEditComplete",
      single: true,
      buffer: 100
    }
  ]

};

Finally, like the inject configuration, the observe configuration from a subclass does not replace the configuration from a superclass. Instead, it is merged with the observe configuration of a superclass. A superclass and subclass can attach listeners on the same object for the same event, as long as they have different event handler methods. In cases where a superclass and subclass define the same handler method for the same event observed on the same injected object, the handler method specified by the subclass takes precedence.

Next: ViewController Live Selectors