Basics of ExtJS 4 MVC Architecture:

MVC (Model, View, Controller) is an application architecture pattern in many other frameworks like ASP.Net, Java spring etc. which are slightly different from each other. Sencha also uses MVC architecture in Ext JS 4 and Sencha touch. Ext JS 4 is a JavaScript based application framework, so MVC in Ext JS 4 is a client-side MVC framework which means that model, view and controller will work on user’s browser.

Sencha defines MVC as follows:

Models are a collection of data fields which persist through the data package. They can be linked to other models through associations and linked to a data stream through a proxy.

Visit Sencha documentation for more information on Model.

Views are any type of components that output information to your browser, i.e. Container, Form, Grid, and Chart.

Controllers are used to add your application logic. You can add events to your views and their components as well as integrate data from your stores into your views. Ext.app.Controller is a base class for any controller.

Visit Sencha documentation for more information.

Data Package:

Ext JS 4 MVC is a client-side framework. It also has a separate data package that loads and saves your application data. There are three main classes in data package, Model (model of MVC), Proxy and Store. We have already seen the model. Sencha defines Proxy and Store as follows:

Proxy: Proxy handles loading and saving of model data. There are two types of proxies in Ext JS 4, Client proxy and Server proxy. Client proxy saves data locally to client in html5 localStorage, sessionStorage or memory. Server proxy loads and saves data by sending requests to some remote server(application server). Ext.data.proxy.Proxy is a base class for all proxies.

Visit Sencha documentation for more information on Proxy.

Store: Stores are client side cache of model objects. It uses proxy to load the data and also provides functions for sorting, filtering and querying the model instances contained in it. Stores are normally used to present data in grids. Ext.data.Store is a base class for all the stores.

Visit Sencha documentation for more information on store.

The following figure depicts how MVC and data package works together:

ExtJS 4 MVC & DataPackage

Visit Sencha documentation for more information on MVC architecture and Sencha documentation for data package in Ext JS 4.