Introduction to MVC in Sencha Touch 2

Before reading this article please goes through the following articles.

1. Introduction to Sencha Touch 2
2. Hello World App using Sencha Touch 2
3. Sample form application using sencha touch 2
4. Dealing with containers in sencha touch 2
5. Working with DataBound Controls

Introduction

In last article we played with data-bound controls. Till now we seen some basics with sencha touch which we can do. Now we will move to the architecture part of sencha touch. As in the first article we seen that sencha has in-built support for MVC. In this article we will see the MVC architecture in sencha touch 2.

I guess so here everybody is familiar with MVC on server side technologies. As in my first article I’ve stated that sencha touch is client side technology to develop mobile apps so here we will see how we can follow MVC rules on client end using sencha touch.

MVC (Model-View-Controller)

As all of you are aware of MVC. What is mean by MVC? How it works? etc… etc… We will take each step in MVC in sencha.

Controller

As all of you knows that when client initiate any request or action its first gets handled by controller. In sencha touch the same thing happens but remind that here controller is on client end not on server end. In sencha touch when client initiate any action then it’s first get handled by controller. In sencha touch application all the controllers, views, models are already loaded on client end hence when client initiate the action related controller will pick up the user request.

If request is for fetching the data from back-end server then controller initiate the store which is responsible to talk to server. Store will get the data and will fill into the model and then model is set to view and view is rendered back to user’s screen. If request is not for data then controller directly can return the view to user’s screen.

Store

Here in sencha touch we have an additional step called store. Store is responsible for talking to server. The store work can be handled by model itself but using store is the standard way in sencha touch application. Store is nothing but the traveler between model and back-end server. Once store get the data from server it sets the data in model.

Model

Here in sencha touch model is same as our data-model in server side MVC. Model contains fields/properties to hold the data. Once model has the data then we can set this model to view.

View

In sencha touch view is nothing but design of pages. Just a difference here view are created for mobile devices. Views contains a JavaScript code which renders the html5 dom element on client browsers. Here in sencha touch we have advantage of handling events in view itself.

Conclusion

Here we have seen MVC provided by sencha touch. In our next article we will see what are pre-requisite to generate sencha app? How to generate sencha touch application? So stay tuned.