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

Question

I have a few Extjs 4 MVC architecture questions, and I would really appreciate some tips or examples.

• How are controllers related to their views? What is the template for the controller that has a link to its representation?

• Are the controllers global for the application instance? I only saw examples showing that the controllers are loaded by the application instance, but I have never seen the controller be part of some subcomponent. Does this mean that MVC does not apply to component classes? Example. I would like to create a list search component consisting of a grid, a search criteria panel and several controls / menus. MVC will be very useful for implementing the internal logic of this control, but the extjs API assumes that this is not a supported script.

• Extjs 4 (Ext.require) has a nice dynamic load feature. But is this supposed to work somehow with MVC architecture? Is dynamic loading of views and controllers supported? As in the previous question, I saw only examples where all controllers, models, and views are loaded in advance when the application starts. I think about loading the view of the user’s action, and the name of this view is known only after the user has completed the action - how to load the loading of this view, but what about its controller?

Regards RG

Answer 1

• I recommend the controller template. In fact, the view has no logic, except for simple data binding (I think comboboxes and grid), and all event processing is in the controller (for example: the user clicks a button to update the calculation). The model processes all the data logic (example: calculating a monthly loan payment). The controller can load the model in the form using form.loadRecord () and save the form values ​​in the model using form.updateRecord ().

• Controllers should not have any state: no custom properties, just event handlers. Thus, the controller can process multiple instances of the view at the same time. You will need some kind of trickery to get a link to the view (via the first parameter), but I had no problems.

• You can load all your controllers at startup. Just make sure you merge and collapse your files.

Answer 2

Afaict, Ext.require works well w / Extjs MVC. (Fwiw, I use the requires:[] configuration item as opposed to Ext.require.) In the top level of viewport.js, you can set a limited set of requirements to just require a "top level" view.

eg. let's say you have a border layout panel with two sub-panels. Viewport will require: ['topLevelView'] Then topLevelView can require: [westPanelView, centerPanelView] .

As for the instance .. afaict, app.js takes care that everything is created. (My controllers do not create views.)

As for integration with the controller ... extjs mvc way has controllers that handle events from views. The controllers use the selector of configuration requests and refs:[] components to “post” viewing events that they are interested in. Event handlers in the controllers perform work on updating other views (also by reference), in addition to updating / synchronizing data in any stores.

I highly recommend carefully reading the MVC architecture guide in sencha docs:

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

This is a pretty "simplified" example, but it seems to cover the basics of organizing applications and posting events. In addition, three parts of the MVC Application Architecture Guide are presented here:

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

Again, we strongly recommend reading.

Finally, extjs 4.x samples have working code (simple applications, but work) using the extjs MVC architecture; this should help in the application to bootstrap the code. When you download the distribution, check the examples / app / * files. There are three examples of MVC here. One of these applications:

docs.sencha.com/ext-js/4-0/#!/ Example / application / feed-viewer / feed-viewer.html

(I also cut my teeth on extjs 4 mvc .., and you need to be persistent in debugging!)