Basic Application and IoC Configuration

Back to Core Features

Configuring Deft JS is very straightforward. It consists of two basic parts: creating a Deft JS Application class, and configuring the IoC container.

A typical DeftJS application bootstrap file (e.g. app.js) will look like:

// Set up the Loader and specify the path to the application files.
Ext.Loader.setConfig({
  enabled: true,
  paths: {
    "DeftQuickStart": "app/"
  }
});

// Create DeftJS Application
Ext.syncRequire(["DeftQuickStart.Application"]);
Ext.create("DeftQuickStart.Application");

You can see we're configuring the Ext.Loader and then creating an instance of a class named Application. This class needs to extend Deft.mvc.Application. Let's take a look at the code:

Ext.define("DeftQuickStart.Application", {
  extend: "Deft.mvc.Application",
  requires: ["DeftQuickStart.view.Viewport", "DeftQuickStart.store.CompanyStore", "DeftQuickStart.store.CompanyService"],

  init: function() {

    // Configure the DeftJS IoC container
    Deft.Injector.configure({
      companyStore: "DeftQuickStart.store.CompanyStore",
      companyService: "DeftQuickStart.store.CompanyService"
    });

    // Set up QuickTips and create the Viewport
    Ext.tip.QuickTipManager.init();
    Ext.create( "DeftQuickStart.view.Viewport" );
  }

});

The init() method is automatically called when Ext.onReady() runs. We use init() to handle the second piece of Deft JS configuration: setting up the IoC container by calling Deft.Injector.configure().

In the IoC configuration above, we have created two dependency providers, one named companyStore and one named companyService. By default, Deft JS uses lazy instantiation to create singleton instances of the CompanyStore and CompanyService classes. This means that a singleton won't be created until an object in your application specifies one of these dependency providers as an injected dependency.

We'll look at how dependency injection works in a moment. For now, the key thing to understand is that what you see above is really the only configuration you'll usually need in order to use Deft JS.

It's worth noting that using Deft JS's IoC container is not required in order to use the other features of Deft JS. However, the IoC container is an extremely useful and powerful feature. Honestly, we have a hard time trying to think of a reason why you wouldn't use the IoC container, but in the interest of full disclosure we had to mention that technically it is optional.

We have a section of the documentation covering some more advanced IoC configuration options that you might want to look at once you've got the basics working. For now, let's take a look at ViewControllers, the second core feature of Deft JS.

Next: ViewControllers