ExtJS 4 - questions about MVC architecture, using MVC for component development

Question

I have few Extjs 4 MVC architecture questions and would be very grateful for some hints or examples.

1. How controllers are connected with their views? What is the pattern for the controller having a reference to its view?

2. Are controllers supposed to be global for the application instance? I have seen only examples showing the controllers being loaded by the application instance, but I have never seen a controller being a part of some sub-component. Does it mean that MVC does not apply to component classes? Example: I'd like to build a list search component that consists of a grid, a search criteria panel and few more controls/menus. MVC would be quite useful for implementing the internal logic of that control, but extjs API suggests that this is not a supported scenario.

3. There's a nice dynamic loading feature in Extjs 4 (Ext.require). But is it supposed to work somehow with the MVC architecture? Is dynamic loading of views and controllers supported? As in previous question, I have seen only examples where all controllers, models and views are loaded upfront on application startup. I'm thinking about loading a view on user's action and the name of that view is known only after the user completes the action - how to go about loading that view, what about its controller?

best regards RG

Answer 1

• I recommend the Supervising Controller pattern. Essentially, the view has no logic, except for simple data binding (think comboboxes and grids), and all the event handling is in the controller (example: user clicks a button to refresh a calculation). The model handles all data logic (example: calculating the monthly payment on a loan). A controller can load a model into a view using form.loadRecord() and save form values to a model using form.updateRecord().

• Controllers should have no state: no user-defined properties, just event handlers. This way, a controller can handle multiple view instances at the same time. You will need some trickery to get a reference to the view (via the first parameter), but I haven't had any problems.

• You can load all of your controllers at startup. Just make sure you concatenate and minimize your files.

Answer 2

Afaict, Ext.require does work well w/ Extjs MVC. (Fwiw, I use the requires:[] config item as opposed to Ext.require.) In the top level viewport.js, you can put in a limited requires config to just require the "top level" view.

E.g. lets say you have a border-layout panel w/ two sub-panels. Viewport would require: ['topLevelView'] Then, topLevelView can require: [westPanelView, centerPanelView].

As for instantiation.. afaict, the app.js takes care of getting everything instantiated. (My controllers don't instantiate views.)

As for controller integration ... the extjs mvc way has the controllers handling events from the views. Controllers uses the refs:[] config and component query selectors to "wire" the view events they are interested in. The event handlers in the controllers do the work of updating other views (also by reference), in addition to updating/syncing data in any stores.

I highly recommend a careful read of the MVC arch guide in the sencha docs:

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

Its a rather "simplistic" example, but it seems to cover the basics of app organization and event wiring. Also, there's a three part guide on architecting MVC apps here:

http://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt1

Again, highly recommend read.

Finally, the extjs 4.x samples have working code (albiet simple apps, but working) using extjs MVC architecture; this should help in code bootstrapping app. When you download the distro, check out the examples/app/* files. There are three MVC examples there. One is this app:

docs.sencha.com/ext-js/4-0/#!/example/app/feed-viewer/feed-viewer.html

(am also cutting my teeth on extjs 4 mvc.. and one needs to be persistent in the debugging!)