Before reading this article please goes through the following articles.
- Introduction to Sencha Touch 2
- Hello World App using Sencha Touch 2
- Sample form application using sencha touch 2
- Dealing with containers in sencha touch 2
- Working with DataBound Controls
Introduction
In last article, we played with data-bound controls. Till now we have 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 have 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 does it work? etc… etc… We will take each step in MVC in sencha.
Controller
As all of you know that when the client initiates any request or action its first gets handled by the controller. In sencha touch, the same thing happens but remind that here controller is on client end not on the server end. In sencha touch when the client initiates any action then it’s first to get handled by the controller. In sencha touch application all the controllers, views, models are already loaded on the client end hence when the client initiates the action related controller will pick up the user request.
If the request is for fetching the data from the back-end server then the controller initiates the store which is responsible to talk to the server. The store will get the data and will fill into the model and then the model is set to view and view is rendered back to the user’s screen. If the request is not for data then the controller directly can return the view to the user’s screen.
Store
Here in sencha touch, we have an additional step called the store. Store is responsible for talking to the server. The store work can be handled by the model itself but using the store is the standard way in the sencha touch application. Store is nothing but the traveler between model and back-end server. Once the store gets the data from the server it sets the data in the model.
Model
Here in the sencha touch model is same as our data-model in server-side MVC. The model contains fields/properties to hold the data. One the model has the data then we can set this model to view.
View
In the sencha touch view is nothing but design of pages. Just a difference here the view is created for mobile devices. Views contain a JavaScript code that renders the html5 dom element on client browsers. Here in sencha touch we have the advantage of handling events in the 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 a sencha app? How to generate a sencha touch application? So stay tuned.