Ext JS overview

We have already mentioned some Ext JS capabilities. Let's take a brief look at each one of them. But first, if you want to take a look at the official Sencha Ext JS webpage, visit http://www.sencha.com/products/extjs/.

Basic tutorial

Before diving into this book, it is recommended that you read the contents of the following links. They contain the basic information that any developer needs to learn before starting with Ext JS:

• Basic tutorial and Ext JS overview: http://www.sencha.com/products/extjs/up-and-running
• Ext JS guides: http://docs.sencha.com/extjs/5.0/
• Ext JS documents: http://docs.sencha.com/extjs/5.0/apidocs/
• Ext JS examples: http://dev.sencha.com/ext/5.0.1/examples/index.html
• Forum (become part of the community): http://www.sencha.com/forum/

Class system

Ext JS uses an object-oriented (OO) approach. We declare classes with attributes known in Ext JS as configurations and methods (functions in JavaScript).

Ext JS also follows a naming convention. If you are familiar with OO programming, you are probably familiar with the naming conventions of Ext JS as well. For example, class names are alphanumeric, starting with an uppercase character, and and then the rest of the letters are in CamelCase. For example, if we want to create a class to represent the client details, we could name it ClientDetails. Method and attribute names start with a lowercase character and then the rest of the letters are in CamelCase. For example, retrieveClientDetails() is a good name for a method and clientName is a good name for an attribute.

Ext JS is organized in packages as well. Packages are a way of organizing the code that has the same purpose. For example, in Ext JS, there is a package called data that handles everything related to data in the framework. There is a packaged named grid that contains all the code related to GridPanels.

Note

For more information about the class system, please read http://docs.sencha.com/extjs/5.0/core_concepts/classes.html.

Components

The main reason some people consider using Ext JS is probably because of its rich and user-friendly components. Ext JS contains some of the most used components in web applications, such as forms, grids, and trees. We can also use charts that are touch-friendly (meaning they work on touchscreens as well) and the drawing package that uses all the advantages of Scalable Vector Graphics (SVG) and HTML5.

You can checkout the official Sencha Ext JS examples page at http://dev.sencha.com/extjs/5.0.0/examples/index.html to have an idea of what we can do with the examples.

The component hierarchy

You will notice that throughout this book, we will mention terms such as component, container, and widget. The following diagram exemplifies the component hierarchy in Ext JS:

The Component class is the parent class for all Ext JS widgets. Below the Component class, we have the Container class. The Container class might contain other components. For example, let's take a look at the following GridPanel:

The Grid Panel class extends from the Panel class, a very popular component in Ext JS. The Panel class supports headers, docked items (toolbars), and it contains a body space. Subclasses of the Panel class, such as DataView, Tree, Grid, and Form, are panels, but instead of the body, they have a specialized View class that is responsible for rendering the specific information. For example, the View class of a Grid panel is specialized in rendering the Grid Column; the View class of a Tree Panel is specialized in rendering hierarchical information, and the View class of a Form panel (called BasicForm) is specialized in rendering form fields.

GridPanel

The grid component is one of the most used components in web applications. It is used to display tabular data.

To create a grid, the developer needs to declare at least two configurations: columns and Store. The Store class organizes a collection of data in Ext JS, and it is responsible for feeding the grid with the information to be displayed. We will explore it when we discuss the data package.

The grid component can be used as a plain and simple data grid, with only the information records being displayed. Or, if we have a large amount of data, we can use its paging capabilities, or we can also use a Big Data Grid if we really have a large amount of data. There are also other features such as grouped header grid (also known as Pivot Grid); we can also have a grid with locked columns or even with widgets, such as chats, as demonstrated by the previous screenshot. Among other features, we can also sort and filter the information inside the grid and use some of its plugins to accomplish tasks such as expanding the rows to display more information without popups, using checkboxes to select rows and automatic numbered rows as well. And there is more: the grid component also supports editing by opening a small pop-up row so that you can edit the information directly in the grid. The grid also supports cell editing, which is similar to what we can do in MS Excel—edit the information by double-clicking on a cell.

Note

For more information, please take a look at http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.grid.Panel and http://docs.sencha.com/extjs/5.0/components/grids/grids.html.

TreePanel

Trees display hierarchical data, such as a file directory. A tree's data comes from a TreeStore or is predefined in the root configuration. The tree also supports sorting and filtering, select a row using checkboxes, and we can also mix a tree with a grid and use the TreeGrid component.

It also supports plugins such as drag and drop between trees.

Note

For more information, please take a look at http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.tree.Panel and http://docs.sencha.com/extjs/5.0/components/trees.html.

Forms

Next, we have the form component. We can implement powerful forms using text, area, and number fields. We can also use the date/month picker, checkboxes, radio buttons, comboboxes, and even file upload. All fields have the basic native validation support (with error messages to the user), such as mandatory fields and minimum and maximum value or length, but we can easily customize and create custom validation (IP address for example).

Note

For more information, please take a look at http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.form.Panel and http://docs.sencha.com/extjs/5.0/components/forms.html.

Other components

We also have the charts. We can build column, bar, line, area, scatter, pie, radial, gauge, and even financial charts. We can have basic, stacked, multi-axis, and 3D charts as well. The charts are also fed by a Store.

And of course, there are basic components that will help our application look even better, such as menus, tabs, panels, windows, alerts, toolbars, and so on. The components have Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) support and also support right-to-left languages.

Seems nice, right? We will cover most of the components and its capabilities throughout the examples of this book.

Layouts

Ext JS supports different possibilities. It also has a great layout manager (only when we create an Ext JS application using its base component, the Viewport. For components that are used in a standalone form (rendered in a <div> tag, the layout manager does not work when you decrease the size of the browser window).

Some of the layouts supported are Absolute layout (where we need to use the absolute x and y positions of the component in the screen or within the component); Accordion layout, Border layout, Card layout, Center layout, Column layout, Fit layout, Hbox and VBox layouts, and Table layouts.

The layouts that are most used in applications are Border, Card, Fit, and HBox and VBox. We will cover different layouts through the examples of this book as well.

Note

For more information, please take a look at http://dev.sencha.com/ext/5.0.1/examples/kitchensink/#layouts and the layout.container package at http://docs.sencha.com/extjs/5.0/apidocs/#!/api/Ext.layout.container.Absolute.

Data package

The data package is one of the most important packages from the Ext JS SDK. Ext JS components such as grid, Tree, and even the Form are data-driven.

Server-side languages usually support data well. In Java, PHP, C#, and other languages, we can create entities known as Plain Old Java Object (POJOs), Persistent Domain Objects (PDOs), and Value Objects (VOs), and other names that we usually give to these entities. Ext JS supports data, so we represent entities in the frontend as well.

There are basically three major pieces:

• Model: This represents the entity. It can represent a class we have on the server side or a table from the database. Model supports fields, validations, associations (OneToOne, OneToMany, ManyToMany).
• Store: This represents a collection of models. It also supports groups, filtering, and sorting.
• Proxy: This represents the way we are going to connect to the server (or a local storage). It can be Ajax, REST, JSONP, Memory, or HTML5 LocalStorage. Inside the proxy, we can define Reader and Writer. The Reader attribute is responsible for decoding the data we receive from the server (we can define it if it is JSON or XML, and we can also define its format). The Writer attribute is responsible for encoding the data to be sent to the server; it can be JSON or XML, and we can also define its format. The Proxy can be placed inside a Model or a Store.

Note

For more information please read http://docs.sencha.com/extjs/5.0/core_concepts/data_package.html.

The MVC and MVVM architectures

While working with Ext JS, we can choose between two architectures for our frontend code: Model View Controller (MVC) and Model View ViewModel (MVVM). There is also a third option, which is a hybrid between MVC and MVVM.

Throughout this book, we are going to learn more about MVC, MVVM, and also the hybrid approach.

Note

For more information please read http://docs.sencha.com/extjs/5.0/application_architecture/application_architecture.html.

Look and feel of Ext JS applications

We can also customize the theme of Ext JS applications. The theming is based on Sass and Compass. We will dive into themes in the last chapter of this book.

Note

For more information please read http://docs.sencha.com/extjs/5.0/core_concepts/theming.html.