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.