Sencha Touch 2.0 MVC in 5 minutes or less

21 October 201118 Comments

I’ve shied away from JS frameworks on the mobile platform primarily due to performance. I had not been able to find one that came close to native performance on Android. This changed last weekend when I tried out the Sencha Touch 2.0 dev preview. Performance is vastly improved over Touch 1.0. Animations and transitions are smooth, even on my Android 2.2 device and I was able to get up and running very fast.

While I was able to get a basic app up and running quickly, unfortunately I spent a lot of time re-factoring into a proper MVC structure. The documentation on how to do this in Touch 2.0 is not there yet and there are some albeit small but killer differences between Touch1.0 and 2.0. To a novice like me they cost me a few hours.

Everything here was based off the Sencha ExtJS 4.0 walkthrough available here:

a) Let the app instantiate your controllers and any global stores your app needs. Notice how the initial layout is created using xtypes? These are created as aliases in the views.

b) Let your controllers instantiate your views and stores.

c) Use Component Queries instead of Ext.getCmp(‘id goes here’). This’ll keep your code more manageable as the code base grows. Note, the “ref” name here is important as it’s used to generate getters for the view instances. E.g. a ref of “stationList” will create a getter on the controller of “getStationList”.

I’ve already heard from a few folks so it looks like this project is helpful. It’s also ready for dropping into a Phonegap shell. Fork it and update or let me know if there’s anything you’d like to see added.

Thanks a lot for this, I really appreciate making this it really helps me understand (I was trying to start an app based on the Ext JS 4 tuts myself). I do have a couple of questions I hoped you could answer.

At the beginning it mentions:

Ext.require([
‘Ext.XTemplate’,

Why is this initiated at the start? I can see no reference of templates when I look at the code.

what does this.callParent do?

And the refs are confusing me as I don’t understand the #bottomInput and bottomField parts.

If you could explain those parts I’d be eternally grateful

Simon

# 26 October 2011 at 11:57 AM

Hearts said:

Thanks! That’s really helpful. I’ve got it working in Google Chrome but cannot get it working in Eclipse using Phonegap for the android emulator v2.2. The index.html is exactly the same as the web version except I’m including the phonegap.js file. What am I missing?

Thanks guys, glad this helped.
@Simon – the XTemplate is not used, I think I just left it there as a remnant.

this.callParent is there to maintain overridden functionality in the events.

The refs are confusing, basically they allow you to setup a reference to a component instance on a view. E.g. if I have a button with an id of “myButton” I’d normally have to do getCmp(‘myButton’) to get an instance of it. Setting up a ref will allow you to avoid assigning an id and instead get the instance using “getMyButton” (assuming your ref was called “myButton”). The selector is like a CSS selector but for dom elements, so if I have a button on a panel on a tab my selector would look like tabpanel > panel > button for that button.

I can also setup a ref using an id as I’ve done in the example, e.g. #bottomInput refers to a component with id=bottomInput, just like in CSS.

Hope that makes sense.

@Hearts – I had similar problems and never really figured out why but I think the Loader doesn’t work on devices. I found removing the dynamic loader and then adding in the script tags for each and every file of JS in my index.html worked when deployed onto a device.

Let me know if you have further issues.

# 26 October 2011 at 1:45 PM

Hearts said:

Hi Francis, appreciate your response. Is there something else I should be doing other than;

1. Setting the ‘Ext.Loader.setConfig({ enabled: true});’ to false or commenting it out and

2. adding the script tags in the index.html for the controller, model, store and view javascript files.

I’m still getting a blank screen in the android emulator despite these changes.

@Hearts, nope sorry, that’s pretty much what worked for me. Use sencha-touch-debug-w-comments and make sure your console doesn’t report any problems on the desktop. Might have to play with the order in which the files are included.

# 27 October 2011 at 12:25 PM

Shah said:

Do you happen to have example multiple controller and view? Can you show how to load/initiate other view from controller?

# 27 October 2011 at 5:06 PM

Hearts said:

Thanks! It works now. Just needed to include the controller last in the index.html.

@Shah, sure, just create a new controller (copy the existing one) and give it a name e.g. “account”, create any views you want and assign them to the controllers’ “views” array.

Then reference this new controller in the app.js “controllers” array. Done.
Hope that helps,
-fs

# 28 October 2011 at 10:59 AM

Hearts said:

Hi Francis, I’ve had this problem since downloading this example but didn’t raise it as I thought I’d eventually get it working, but I haven’t. Basically the simplelist carousel view doesn’t show the json data. I haven’t modified the model, store or view. The directories are consistent with yours. The code hasn’t been modified in that respect since download. I thought it might just be an issue in google chrome but the same occurs even when deployed to my phone. The json file is definitely loaded because it has an ‘ok’ status in the network tab in google chromes console.

Is there something more that needs to be done/called from the controller or view etc? Did it work first time for you? If not how did you combat the issue? Any advice would be great.

@Hearts: Do you happen to have a DOCTYPE declaration at the top of your index.html file? I experienced the same issue with the list not displaying on the 2nd card, and it turns out the problem was that I added to my index.html file (as per the Getting Started guide). As soon as I removed it, the list appeared.

@Francis: Any idea why this is happening?

# 13 November 2011 at 2:21 PM

Hearts said:

@Jeremy. Wow that did fix the problem. Thanks! I’m baffled as to why though. In the previous versions of Sencha I always had DOCTYPE at the top of the index.html file when loading local or remote json files.

# 17 November 2011 at 9:32 AM

William said:

Hi Francis,

Thanks for the great tutorial!

One question about multiple views/controllers. Let’s say I have another view besides the carousel that’s created in “launch” function, and I want to go to that view when you tap on one button inside one of the carousel slide. How do I do that?

Basically, I figure I need to do setActiveItem to be either the carousel or my new view. But how?

Thanks a lot for this. I’ve been tearing my hair out all night trying to figure out why the class loader system wasn’t working for me and it was because I was missing this line in my app.js file

Ext.Loader.setConfig({ enabled: true });

Thanks again.

# 14 February 2012 at 5:43 PM

Steve C said:

Thanks for making this. If I use your code as is, I get “Cannot create an instance of unrecognized alias: widget.home”. If I move the view definition from the controller to app.js it works, but then I can’t add new controllers and views (the new view seems to still be wired up to the home controller somehow).

I also keep getting the dreaded “Activity has leaked window that was originally added” error.

@Steve C. It’s probably due to underlying changes in the Sencha Touch library. I’ll need to update to leverage the latest bits.

# 11 March 2012 at 11:39 PM

Anx said:

Thanks for this tutorial. I am not able to make it work in SAP. I have downloaded the commercial Sencha Touch 2 version and there is no “sencha-touch-all-debug-w-comments.js” file. I tried using the other debug file and still can’t see anything on chrome.