Accessing Views

Back to Core Features

The key role of a ViewController is manage the behavior and state of a view. To facilitate this, Deft JS makes it very easy to get references to the view and its child items.

Consider this view component. It's a GridPanel, and we're injecting our companyStore into it to supply data to the grid:

Ext.define("DeftQuickStart.view.CompanyGridPanel", {
  extend: "Ext.grid.Panel",
  alias: "widget.deftQuickStart-view-companyGridPanel",
  controller: "DeftQuickStart.controller.MainController",
  inject: ["companyStore"],

  initComponent: function() {
    Ext.applyIf(this, {
      itemId: "companyGridPanel",
      title: "Company Listing",
      store: this.companyStore,
      columnLines: true,

      columns: [
        {
          xtype: "gridcolumn",
          dataIndex: "company",
          text: "Company",
          flex: 1
        }, {
          xtype: "numbercolumn",
          dataIndex: "price",
          text: "Price",
          renderer: Ext.util.Format.usMoney
        }, {
          xtype: "numbercolumn",
          dataIndex: "change",
          text: "Change",
          format: "0.00"
        }, {
          xtype: "numbercolumn",
          dataIndex: "pctChange",
          text: "% Change",
          format: "0.00"
        }, {
          xtype: "datecolumn",
          dataIndex: "lastChange",
          text: "Last Change"
        }, {
          xtype: "gridcolumn",
          dataIndex: "industry",
          text: "Industry"
        }
      ],

      tbar: [
        {
          xtype: "checkbox",
          itemId: "manufacturingFilter",
          boxLabel: "Show only Manufacturing companies"
        }
      ]
    });

    return this.callParent(arguments);
  }
});

Now let's look at the MainViewController attached to this view to see how we can reference the view and its children:

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

  control: {
    manufacturingFilter: true
  },

  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)");
  }
});

The first thing to look at is the control configuration property. This is where you specify which view elements you would like the ViewController to set up references to. In this case, I want to access the manufacturing filter checkbox with an itemId of manufacturingFilter.

Using an itemId is simplest and most common way to set up view references, but you can use any component query selector if you need to. I'll demonstrate this in a moment.

If you look at the testViewReferences() method, you can see I'm logging the Checkbox object using getManufacturingFilter(). DeftJS automatically creates a getter and setter for the items in your control property.

You'll also see that I'm logging the view object itself (the CompanyGridPanel) with the getView() method. Deft JS sets up this reference automatically, and it always refers to the view object that the ViewController is attached to. In this case, that's the CompanyGridPanel object.

As I mentioned, if you can't select an element using an itemId, you can use any valid ComponentQuery:

  control: {
    manufacturingFilter: {
      selector: "toolbar > checkbox"
    }
  },

In case you didn't notice, the component selectors in the control block are relative to the view that the ViewController is managing. This is another big advantage that a Deft JS ViewController has over the Ext.app.Controller that is built into ExtJS/Touch. Instead of having to set up selectors from the root container, your selectors are relative to the managed view. This makes selecting the right elements much easier.

Keep in mind that since the selectors in your ViewController are relative to the view being managed, they'll only locate components that are descendants of that view. If you need access to a floating component or other element that isn't a descendant of the view, DeftJS won't know how to find it through the control configuration. You'll need to manage it with your own component query.

Accessing the Controller from the View

While the view is meant to remain as ignorant as possible of it's ViewController, in some cases you might need access to the view's ViewController. To allow for this, Deft JS automatically creates a method in the view named getController(). This will return the ViewController that is attached to that view.

Conclusion

We've now seen how to access the view and it's children in a ViewController. Next, let's go further and look at how you can handle events fired from these view elements.

Next: Handling View Events