Best Practices Sencha Touch MVC

Question

I am trying to pay attention to the structure of MVC Sencha Touch, but I find several different approaches. In one found here , there is an approach to structuring Sencha Touch applications presented at SenchaCon 2010. He has extra weight from a Sencha Touch employee, but he is several months old. In other, more recent posts about Sencha Touch MVC, they have tutorials (such as here , as well as the Manning MEAP Sencha In Action by Jay Garcia) that apparently rely on Ext.Dispatch in views to invoke specific controller methods, passing additional elements to the controller, which makes the presentation of the controller understandable.

My question, which is considered best practice for structuring the Sench Touch MVC app?

Answer 1

I suggest making your controllers viewable. When the controller receives a send event, you should have something similar to the following:

this.controllerViewOne = this.controllerViewOne || this.render({ xtype: 'panel', listeners: { onMajorUIAction : function(params){ Ext.Dispatch({ controller : 'ProperController', action : 'ProperAction', historyUrl : 'ProperHistoryUrl', params : params }); } } }); 

This has the additional advantage of having all the “main” listeners for each of the controller representations in one space. It also means that reusing views for other controllers is easier.

Your presentations should include listeners who help to abstract the complexities of the individual components and their events / listeners.

I use the user interface manager for global user interface changes, for example, hiding / showing the main toolbar or displaying the back button.

Answer 2

I had similar questions. Sencha automates the creation of many getters for your view component instances. This is very confusing.

As an example, I took Sencha Touch 2.0 and put together the complete MVC scaffold application as an example. I based it on ExtJS 4.0 MVC architecture. This will work out of the box with a preview of the Sencha Touch 2.0 developer and should save you a ton of time.

https://github.com/FrancisShanahan/SenchaTouch2MVCHelloworld

To answer your specific question, the latest ExtJS 4.0 MVC architecture tunes listeners to instances of view components in the controller's init event. Here is an example taken from a github project already linked:

 Ext.define('HelloWorld.controller.Home', { extend: 'Ext.app.Controller', views: ['Home', 'SimpleList'], .. etc... init: function() { // Start listening for events on views this.control({ // example of listening to *all* button taps 'button': { 'tap': function () { console.log('Every button says Hello world'); } ... 

Let me know if this helps, Regards, -fs