ExtJS Library

ExtJS is a JavaScript library for building web applications and user interfaces. It supports AJAX technology, animation, working with DOM, implementation of grids and tabs, events handling. The official website of the library.

Application Structure

Application Structure
Figure 1: Application Structure

ExtJS applications architecture is based on the MVC template.

MVC template
Figure 2: 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.

Ext.data.Model
Figure 3: Ext.data.Model

Fields

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.

Proxy

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.

Associations

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:

  • One-to-one.
  • One-to-many.
  • Many-to-one.

Validations

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

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.

View

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.

View
Figure 4: View

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.

Сontroller

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’.

Useful links