ViewController

Back to Core Features

A ViewController is a lightweight controller for a view. It is responsible for managing the state of the view and its child components, listening for events dispatched by the view and its child components in response to user gestures, and delegating work to injected business services (such as Stores, Models, Service classes, etc.).

The key idea behind a ViewController is to make your views as "dumb" as possible. You know all those inline event listeners and all that view-specific logic that typically complicates your view components? Rip it out and move it into a ViewController. Your fellow developers and the folks who may later have to maintain your code will have big smiles on their faces when they see the nice, clean view components you leave behind.

Unlike Sencha's Ext.app.Controller, DeftJS ViewControllers are not singletons. That means each view will get its own instance of its associated ViewController. It's automatically created when the view is created, and it's automatically destroyed when the view is destroyed. As you can imagine, this makes it a lot easier to maintain the state of a specific view and deal with view events.

To start with, let's take a look at a basic ViewController:

Ext.define("MyApp.controller.MainController", {
  extend: "Deft.mvc.ViewController",

  // Set up references to UI components and create event listeners
  control: {
    myButton: {
      click: "onMyButtonClick"
    }
  },

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

  onMyButtonClick: function(button, event) {
    // Do something in response to button click
  }
});

Next: Injecting Dependencies