In the previous section, we discussed about the need to have an MVC architecture implemented on the browser side. Given that Sencha Ext JS and Touch are Rich Internet Application (RIA) frameworks having various components such as grid, chart, and combo-box, which use a collection of models and components such as form panel, which uses a model, these components have been designed in such a way that a collection of models can be shared across them. For example, user list can be shown in a grid or in a combo-box. Sencha Ext JS/Touch introduces a cache of models, called store, which is shared between the components. A model or a store interacts with the server-side controllers. The following diagram depicts the architecture used in Sencha Ext JS/Touch:
- Model is a collection of fields and their data. Models know how to persist themselves through the data package.
- View is any type of component. Grids, trees, and panels are all views.
- Controllers are special places to put all of the code that makes our application work.
- Store acts as a cache, which contains a collection of models.
For example, our application is supposed to display the list of users, a User model will represent the fields, such as firstName, lastName, and address. A Users store will contain a collection of User models. A grid panel represents the view to show a nicely styled users' list. Controller will handle the events such as a double-click on the grid row to show a form to edit a user's information, or click on the Edit button to edit the details of a user's address.
Now, on the basis of the framework, we will see how the MVC architecture is mapped.
Ext JS framework introduced MVC in Version 4.0 for the first time. It shares a lot of common code with the Touch framework. However, there are certain subtle differences which we will see in the subsequent chapters. Since its introduction, various cleanups and fine-tuning have been done to make it consistent and efficient. The framework provides various classes, as shown in the following diagram, to help us build a true MVC-based application:
Ext.app.Application
acts as the entry point in the MVC-based application. Use of this replaces the usage of the Ext.onReady method that is used to implement the entry point. Besides providing the entry point, the application also requires us to provide the dependencies in the form of controllers, which form the application, the stores, and so on. Controller, which extends Ext.app.Controller class, lists out the views and models that it will interact with. Based on the specified dependencies, the application loads the controller, which in turn loads the views and models and works with them to provide the desired view and allow the user to interact with it. Views are mainly the framework-defined visual components such as grid panel, form panel, tree panel, and buttons, or the user-defined components. In general, Ext.Component
and Ext.container.Container
are the base classes any view component extends to. Ext.data.Model
is the base model class to define a model using the framework.
This object is used across various components to provide the application state. In addition to the models, the framework also offers a caching for the models in the form of the Ext.data.Store class, which can be passed to different components, such as grid, tree, and combo box, to show the data.
In Chapter 2, Creating an Application, we will discuss in detail each of these pieces.
As mentioned in the previous section, Sencha Touch is the foundation for MVC architecture. It was first implemented as part of it and later introduced to the Ext JS framework, as well. Similar to Ext JS, Sencha Touch supports Ext.app.Application
, Ext.app.Controller
, Ext.Component
, Ext.Container
, and Ext.data.Model
, and they provide a similar set of functionality. However, there is an additional functionality called profiles, which is unique to the Touch framework. It allows us to define different profiles for different target devices (iPhone, iPad, Android phone, and so on). The profile functionality is offered by the Ext.app.Profile class
and it consists of a collection of one or more controllers, one or more views, and one or more models. The Application class detects the profile applicable to the target device on which it is running and based on that, loads and initializes the respective controllers, models, and views. Store is available in Touch as well, and contains a collection of models. The following diagram depicts the components of the application architecture in Sencha Touch.
