Handling View Events

Back to Core Features

We now know how to access the view and its children from a ViewController. The last piece of this puzzle is handling events fired from the view.

For example, lets say I want to detect when someone checks or unchecks the manufacturingFilter checkbox. In response, I want to toggle filtering of the companyStore to show only companies in the manufacturing industry. Deft JS makes this dead-simple:

Ext.define("DeftQuickStart.controller.MainController", {
  extend: "Deft.mvc.ViewController",
  inject: ["companyStore"],

  control: {
    manufacturingFilter: {
      change: "onFilterChange"
    }
  },

  config: {
    companyStore: null
  },

  init: function() {
    this.callParent(arguments);
    this.testViewReferences();
  },

  testViewReferences: function() {
    Ext.log({dump: this.getManufacturingFilter()}, "Checkbox");
    Ext.log({dump: this.getView()}, "View (GridPanel)");
  },

  onFilterChange: function(checkbox, value) {
    if (value) {
      this.getCompanyStore().filter("industry", "Manufacturing");
    } 
    else {
      this.getCompanyStore().clearFilter();
    }
  }
});

Yes, that's really all there is to it. I just specify the event name and handler method name along with the component selector. When the checkbox changes, onFilterChange runs, which toggles filtering on the companyStore. The grid in my UI automatically updates when the store's filter changes.

Note that the event listeners which the ViewController sets up will be called in the ViewController's scope. If for some reason you want the handler to run in a different scope, you can specify a different scope in the listener setup (see below).

You may be noticing a theme here: Deft JS provides a simple way handle the most common setup of listeners for view events. However, if you need more control, it is available. Here's an example that combines a component query and specifies additional options to the use when adding the event listener:

  control: {
    manufacturingFilter: {
      selector: "toolbar > checkbox",
      listeners: {
        change: {
          fn: "onFilterChange",
          buffer: 50,
          single: true
        }
      }
    }
  },

The last thing I'll mention is that you can also set up listeners on the view being managed by referencing it as view in your control block. So view refers to whatever component actually created the ViewController. Again, in the case of this example, that's the CompanyGridPanel.

  control: {
    manufacturingFilter: {
      change: "onFilterChange"
    },
    view: {
      boxready: "onViewBoxReady"
    }
  },

  ...

  onViewBoxReady: function(view, width, height) {
    return Ext.log({dump: arguments}, "boxReady handler for the CompanyGridPanel");
  }

This wraps up our initial tour of the core features that DeftJS offers:

• IoC configuration and dependency injection
• Accessing views
• Handling view events