ExtJS applications architecture is based on the MVC template.
Model is a type of data in an application. In the simplest case, a model is a collection of fields and their data. The model has four main components: Fields, Proxy, Associations and Validations.
Model fields are defined in the field’s property in the form of an array. Each field is defined as a JS object which has the name and type attributes.
Proxies are used by stores and perform model data loading and storing functions. There are two proxy types:
- Client proxies, which use browser memory or a local storage for storing data.
- Server proxies, which send data to the server using Ajax, JSON-P or REST.
Models can be linked to each other. Even the smallest application can have many models, and it is possible to create dependencies between them. One can create the following associations:
Validations are special structures which allow checking the data stored in a certain model field for ‘correctness’. ExtJS contains a set of standard validations. The most commonly used are validations that check the minimum or maximum allowable field length.
Store is used for storing multiple objects of a certain model. To create our own store, we need to extend from the standard ExtJS store, which is located in the Ext.data.Store package.
Store can only store instances of one particular model, so this means that a separate store object corresponds to each model.
Views are responsible for the visual part or user interface.
Views consist of Components and Layouts. Each component can act as a container for another component, which allows defining the application interface as a hierarchical set of views.
ExtJS includes the following layouts:
- FitLayout – when using the layout, the inner item is expanded to the borders of the parent container.
- VBoxLayout – allows arranging items vertically.
- HBoxLayout – allows arranging items horizontally.
- BorderLayout – allows attaching items to one of the four sides of the window or dock it in the center.
Controller is a key element that binds all application parts together and makes them work.
Controller describes actions, logics of an app. To create our own controller, we need to extend from the basic Ext.app.Controller. Controller initializes view event handlers, all views contain some common base events:
- blur – fires when the item loses focus;
- focus – fires when the item receives focus;
- disable – fires when the item becomes ‘inactive’;
- enable – fires when the item becomes ‘active’.