Shortlink

Controllers vs. View Controllers in Ext JS6

Ext JS 4 provides MVC support where we create a Controller for a collection of Views and Models. The usual confusion to this approach, is how many controllers do you require in an application. The general approach is one controller per use-case.

So if you have to add/edit employee details, you’ll have one View for each and one Controller for all the Views.

[app]
  [view]
    - AddEmployeePanel.js
    - EmployeeDetailsPanel.js
  [controller]
    - EmployeeController.js

Usually, developers argue with this style and try to create one Controller for each View. The Controller can get really crowded and clumsy as it will have code related to several views. Unit testing these controllers is also a pain.

With Ext JS 5( so in 6 too), with the introduction of ViewControllers, this confusion doesn’t exist now. You can create a View and have one ViewController per View and also a ViewModel per view. So the relationship is one-to-one with View and ViewController, and this solves lot of design issues. For the Employee example, this is how the file structure would look like.

[app]
  [view]
    - [employee]
       -AddEmployeePanel.js
       -AddEmployeeViewController.js
       -EmployeeDetailsPanel.js
       -EmployeeDetailsViewController.js 

We really don’t have to worry about creating Controller classes anymore, though I would like to sort-of move the navigation logic to the Global controllers. Personally, I find ViewController to be lot more easy and straightforward to design and implement.