Mastering Ext JS - Second Edition - Sample Chapter
Mastering Ext JS - Second Edition - Sample Chapter
Mastering Ext JS
Second Edition
Second Edition
Mastering Ext JS
C o m m u n i t y
Mastering Ext JS
Second Edition
$ 49.99 US
30.99 UK
"Community
Experience
Distilled"
Loiane Groner
E x p e r i e n c e
D i s t i l l e d
Loiane Groner
Loiane also contributes to the software development community through her blogs,
(English) and
(PortugueseBR), where she writes about IT careers, Ext JS, Sencha Touch, PhoneGap, Spring
Framework, and general development notes, as well as publishing screencasts.
If you want to keep in touch, you can find Loiane on Facebook
(
) and Twitter
).
Acknowledgments
I would like to thank my parents for giving me education, guidance, and advice all these
years and helping me to become a better human being and professional. A very special
thanks to my husband for being patient and supportive and giving me encouragement.
I also would like to thank the readers of this book and the other books I have written, for
their support and feedback. Your feedback is very valuable to me to improve as an author
and as a professional. Thank you very much!
Chapter 5, Advanced Dynamic Menu, is about how to create a dynamic menu that
depends on user permission. The options of the menu are rendered depending on whether
the user has permission or not; if not, the option will not be displayed.
Chapter 6, User Management, explains how to create a screen to list all the users that
already have access to the system.
Chapter 7, Static Data Management, covers how to implement a module where the user
is able to edit information as though they were editing information directly from a
MySQL table. This chapter also explores capabilities such as live search, filter, and inline
editing (using the Cell Editing and Row Editing plugins). Also, we start exploring realworld issues when we develop big applications with Ext JS, such as the reuse of
components throughout the application.
Chapter 8, Content Management, further explores the complexity of managing
information from a table of the database and all its relationships with other tables. So we
cover how to manage complex information and how to handle associations within data
Grids and FormPanels.
Chapter 9, Adding Extra Capabilities, covers how to add features, such as printing and
the ability to export to PDF and Excel, that are not supported natively by Ext JS. This
chapter also covers charts and how to export them to image and PDF and also how to use
third-party plugins.
Chapter 10, Routing, Touch Support, and Debugging, demonstrates how to enable
routing in the project; it is also about debugging Ext JS applications, including what we
need to be careful about and why it is very important to know how to debug. We also
quickly talk about transforming Ext JS projects into mobile apps (responsive design and
touch support), a few helpful tools that can help you in your daily work as a developer,
and also a few recommendations of where to find extra and open source plugins to use in
Ext JS projects.
Chapter 11, Preparing for Production and Themes, covers how to customize a theme and
create custom UIs. It also explores the steps required for, and the benefits of, packaging
the application to production.
Sencha Ext JS also has a cousin called Sencha Touch. It also has the amazing features
we just mentioned, but focuses on the mobile cross-platform world. We will talk very
briefly about Ext JS and Sencha Touch in later chapters of this book.
Request/Response
Data
Model
Proxy
Schema
Session
Store
Layouts
Fit
Border
Card
Accordion
Hbox/Vbox
Center
Absolute
Events
Architecture
MVC
MVVM
Hybrid
Asynchronous
Request
PHP/Java/ASP.NET/Python/Ruby
(frameworks)
Web Container (Tomcat, IIS, WebSphere, Apache)
[8]
Themes
CSS3
Sass
Compass
Sencha
Ext JS
callback
Chapter 1
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:
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.
[9]
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 touchfriendly (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.
Tool
LoadMask
Button
Container
Toolbar
Viewport
Panel
TabPanel
Window
Menu
Table
Grid
Form
Tree
[ 10 ]
Chapter 1
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.
[ 11 ]
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 Exceledit the information by double-clicking on a cell.
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.
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).
[ 12 ]
Chapter 1
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.
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.
[ 13 ]
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.
For more information please read http://docs.sencha.com/
extjs/5.0/core_concepts/data_package.html.
Chapter 1
Installing Ext JS
Let's take a look at how to install Ext JS locally. This step is required because we will
need to have the Ext JS SDK in our computer prior to creating the application with
Sencha Cmd.
[ 15 ]
3. Java JDK: If you are a Java developer, you probably have the Java JDK
installed already. If not, please download and execute the installer at
http://www.oracle.com/technetwork/articles/javase/indexjsp-138363.html. After installing the Java JDK, we also need to configure
the JAVA_HOME environment variable. Instructions can be found at http://
goo.gl/JFtKHF. The Java JDK is required because of ANT, our next step.
4. Apache ANT: The Sencha Cmd engine to create the application and build it
is based on ANT, a Java library. We need to download ANT from http://
ant.apache.org/bindownload.cgi, unzip it to a directory of our choice,
and set the ANT_HOME environment variable (http://ant.apache.org/
manual/install.html).
We can check whether we have the correct environment by executing the following
commands in a terminal application:
Note that the Ruby version installed is 2.x, but as long as you have a 1.8 or 1.9
compatible version in your classpath, you should be OK.
The last step is a web server. The simplest one that we can use to execute the
examples of this book is Apache Xampp. Download and follow the installation
instructions at https://www.apachefriends.org.
All the software required to set up the environment mentioned in
this book is available for Linux, Windows, and Mac OS.
[ 16 ]
Chapter 1
The latest version of Ext JS at the time of writing this book is 5.1.
[ 17 ]
After downloading the Ext JS SDK, unzip it inside the Apache Xampp htdocs folder.
Once we start the Apache server, we will be able to execute the Ext JS examples from
our local environment:
Offline documentation
While developing with Ext JS, we will consult the documentation a lot. Whenever
we mention the name of an Ext JS component in this book, it is recommended that
you go to the documentation and take a look at it. The Ext JS documentation is
available at http://docs.sencha.com/extjs/5.0/. It contains guides (it is also
highly recommended that you spend some time reading the guides before diving
into this book since the guides provide basic knowledge about the framework), and
links to blog posts and also to the documentation itself. As we will consult it a lot,
we recommend installing the documentation locally as well. To do so, go to http://
docs.sencha.com/, open the Sencha Guides menu, and select the offline docs link
as demonstrated in the following screenshot:
[ 18 ]
Chapter 1
Unzip the docs inside the Xampp htdocs folder as well and access your localhost,
as shown in the following screenshot:
[ 19 ]
IDE
You can use any IDE or editor of your preference to develop with Ext JS. There are
a few editors that are very popular: Sublime Text, Atom, Eclipse (if you are a Java
developer), Netbeans, and Visual Studio (if you are a C# developer), Notepad++,
and WebStorm, among others.
If you are looking for the autocompleting feature, you can use the Sencha Eclipse
Plugin that is part of Sencha Complete (paid) at http://www.sencha.com/
products/complete/) or you can use WebStorm (also paid) at https://www.
jetbrains.com/webstorm/).
There is also Sencha Architect (which also has the autocompleting feature). It is a what
you see is what you get (WYSIWYG) editor and is a great Sencha tool that can be used
with the IDE of your preference (to develop the server-side code of the application).
Feel free to use the editor or IDE you are most comfortable with to develop the
source code of this book!
Summary
In this chapter, we quickly overviewed Ext JS and provided some references that are
useful to read to gather the basic knowledge required to understand the terms and
components we will be using in this book.
In the next chapter, we will present the application we are going to work with
throughout this book, and we are also going to create it using Sencha Cmd.
[ 20 ]
www.PacktPub.com
Stay Connected: