Mastering Ext JS - Second Edition - Sample Chapter
Content
This book will help you to utilize Ext JS to its full potential
and will show you how to create a complete Ext JS
application from scratch.
What you will learn from this book
You'll begin by learning how to create the project's
structure, splash screen, login screen, dynamic menus,
open screens dynamically and master-detail grids,
and much more. You will also learn how to export data to
Excel including PDFs and images, while always keeping
best practices in mind.
Develop a splash and login screen
Following this, you'll discover how to use the MVC
architecture, the new MVVM. Next, you'll learn how to
customize themes and how to prepare the application to
be ready for deployment upon completion.
Exploit master detail grids, master detail
forms, trees, and charts
By the end of the book, you will have learned everything
you need to know to truly master Ext JS and start
building advanced applications.
Create dynamic menus and open
dynamic screens
Mastering Ext JS
Second Edition
Second Edition
Mastering Ext JS
Utilize the MVC, MVVM, and
hybrid architectures
C o m m u n i t y
Handle the information on the server
side–no more JSON files!
Customize and build a theme
Mastering Ext JS
Build an application from scratch
Second Edition
Who this book is written for
$ 49.99 US
£ 30.99 UK
"Community
Experience
Distilled"
Loiane Groner
If you are a developer who is familiar with Ext JS and
want to augment your skills to create even better web
applications, this is the book for you. Basic knowledge
of JavaScript/HTML/CSS and any server-side language
(PHP, Java, C#, Ruby, or Python) is required.
E x p e r i e n c e
Learn how to develop advanced and efficient Internet
applications with Ext JS
Prices do not include
local sales tax or VAT
where applicable
Visit www.PacktPub.com for books, eBooks,
code, downloads, and PacktLib.
D i s t i l l e d
Loiane Groner
In this package, you will find:
The author biography
A preview chapter from the book, Chapter 1 "Sencha Ext JS Overview"
A synopsis of the book’s content
More information on Mastering Ext JS Second Edition
About the Author
Loiane Groner has over 9 years of experience in software development. While at
university, she demonstrated great interest in IT. Loiane worked as a teaching assistant
for 2.5 years and taught algorithms, data structures, and computing theory. She
represented her university at the ACM International Collegiate Programming Contest—
Brazilian Finals (South America Regionals) and also worked as a student delegate of the
Brazilian Computing Society (SBC) for 2 years. Loiane won a merit award in her senior
year for being one of the top three students with the best GPAs in the computer science
department and also graduated with honors.
Loiane has worked at multinational companies, such as IBM. Her areas of expertise
include Java SE and Java EE and also Sencha technologies (Ext JS and Sencha Touch).
Nowadays, Loiane works as a software development manager at a financial institution,
where she manages overseas solutions. She also works as an independent Sencha
consultant and coach.
Loiane is also the author of Ext JS 4 First Look, Mastering Ext JS, Sencha Architect App
Development, and Learning JavaScript Data Structure and Algorithms, all published by
Packt Publishing.
She is passionate about Sencha and Java; she is a leader of Campinas Java Users Group
(CampinasJUG) and a coordinator of Espirito Santo Java Users Group (ESJUG), both
Brazilian JUGs.
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
).
Loiane's profi le is already available on the Packt Publishing website,
.
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!
Mastering Ext JS Second Edition
If you are an Ext JS developer, it probably took you a while to learn the framework. We
know that the Ext JS learning curve is not short. After we have learned the basics, and we
need to use Ext JS in our daily jobs, a lot of questions pop up: how can one component
talk to another? What are the best practices? Is it really worth using this approach and not
another one? Is there any other way I can implement the same feature? This is normal.
This book was written thinking about these developers.
So this is what this book is about: how do we put everything together and create really
nice applications with Ext JS? We are going to create a complete application, from the
mockup of the screens all the way to putting it into production. We are going to create the
application structure, a splash screen, a login screen, a multilingual capability, an activity
monitor, a dynamic menu that depends on user permission, and modules to manage
database information (simple and complex information). And then, we will learn how to
build the application for production, how to customize the theme, and how to debug it.
We will use real-world examples and see how we can implement them using Ext JS
components. And throughout the book, we've also included a lot of tips and best practices
to help you boost your Ext JS knowledge and take you to the next level.
What This Book Covers
Chapter 1, Sencha Ext JS Overview, introduces Sencha Ext JS and its capabilities. This
chapter provides references that you can read before diving into the other chapters of this
book. This is done taking into consideration the possibility that this is your first contact
with the framework.
Chapter 2, Getting Started, introduces the application that is implemented throughout the
book, its features, and the mockup of each screen and module (each chapter covers a
different module), and also demonstrates how to create the structure of the application
using Sencha Cmd and how to create a splash screen.
Chapter 3, The Login Page, explains how to create a login page with Ext JS and how to
handle it on the server side and also shows some extra capabilities, such as adding the
Caps Lock warning message and submitting the login page when pressing the Enter key.
Chapter 4, The Logout and Multilingual Capabilities, covers how to create the logout
capability and also the client-side activity monitor timeout, which means if the user does
not use the mouse or press any key on the keyboard, the system ends the session
automatically and logs out. This chapter also provides an example of multilingual
capability and shows how to create a component so that the user can use it to change the
system's language and locale settings.
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 Overview
Nowadays, there are many flavors for frontend frameworks and libraries in the
market. There are frameworks you can use if you only want to manipulate the
Document Object Model (DOM), frameworks used only for styling, frameworks for
user-friendly components, frameworks used to design your project, and so on. Also
there is Ext JS, a framework used to create Rich Internet Applications (RIA), but it
has many other features than just pretty components.
In this book, we are going to learn how to develop an application from the beginning
to the end with Ext JS 5, also covering some pieces of the backend required to make
our application work. We will learn how to use Ext JS with hands-on examples
covering some components, how they work, and how to use them in each chapter.
But first, you are going to learn what Ext JS is capable of if this is the first time you
have come into contact with the framework.
Understanding Sencha Ext JS
Can we use Ext JS to manipulate DOM? Can we use it if we want pretty and
user-friendly components (forms, grids, trees, and so on)? Can we use it if we need
some nice charts? Can we use the Model View Controller (MVC) architecture to
organize the application with Ext JS? What if we want to use a two-way data-binding
between the Model and the View? Can we do that using Ext JS? And what if we do
not like the colors of Ext JS components' look and feel? Can we easily change it too?
And now a difficult one; can we make a build to obfuscate and optimize the CSS and
JavaScript files of our application using Ext JS? Is Ext JS responsive? Can we use it in
mobile devices?
Amazingly, the answer is positive to all the preceding questions! As we can see, Ext
JS is a complete frontend framework. The mastermind company behind Ext JS is
Sencha Inc. (http://sencha.com).
Sencha Ext JS Overview
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.
Architecture of Ext JS applications
Before we get started, let's make sure we understand a few of the core concepts.
Ext JS is a frontend framework based on JavaScript and HTML5. This means Ext JS
does not connect to the database directly. For storage, we can use one of the types of
HTML5 storage, such as Web SQL or local storage, but these types of storage allow
us to store only 5 MB of data, which is very little for a common application.
Usually, we want to use MySQL, Oracle, MS Server or any other database. To be able
to store information in a database, we need to use a server-side language, such as
PHP, Java, C#, Ruby, Python, Node.js, and so on. Ext JS will communicate with the
server-side language (or web services), and the server will connect to the database or
any other storage (documents repository, for example).
The following diagram exemplifies the architecture of an application developed
with Ext JS:
User
interacts with browser
Components
Grid
Form
Tree
Chart
Button
Toolbar
Window
Request/Response
Data
Model
Proxy
Schema
Session
Store
Layouts
Fit
Border
Card
Accordion
Hbox/Vbox
Center
Absolute
Events
HTTP/S JSON/ XML
Architecture
MVC
MVVM
Hybrid
Asynchronous
Request
PHP/Java/ASP.NET/Python/Ruby
(frameworks)
Web Container (Tomcat, IIS, WebSphere, Apache)
Database (MySQL/Oracle/MS Server/Firebird/others)
document repository and
other services
[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:
•
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.
[9]
Sencha Ext JS Overview
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.
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:
Component
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 ]
Sencha Ext JS Overview
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.
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
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.
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 ]
Sencha Ext JS Overview
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.
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.
For more information please read http://docs.sencha.com/
extjs/5.0/application_architecture/application_
architecture.html.
[ 14 ]
Chapter 1
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.
For more information please read http://docs.sencha.com/
extjs/5.0/core_concepts/theming.html.
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.
Prerequisites for Ext JS and Sencha Cmd
Before downloading Ext JS and Sencha Cmd, we need to set up our computer
to be ready. The following is a list of software needed so that we can create an
Ext JS application:
1. Ruby 1.8 or 1.9: The current version of Ruby is 2.x at the time of writing
this. To be able to create an Ext JS application, we need to have Ruby 1.8 or
1.9 installed. Ruby is required because the theming engine used by Ext JS is
based on Sass and Compass, which are Ruby gems. To download and install
Ruby, please follow the instructions at https://www.ruby-lang.org/en/
installation/.
2. Sass and Compass: These are not CSS frameworks. Sass is a new way of
writing CSS. It is possible to use variables and define functions and mixins.
It is an alternative to Less (maybe you have worked with Less or heard
about it—Sass is very similar). After downloading and installing Ruby,
please install Sass as well. The instructions can be found at http://sasslang.com/install (follow the command-line instructions). Compass is a
Sass framework and is also required. Please install it as well from http://
compass-style.org/install/. Sass and Compass are the heart of the Ext
JS theming engine. All custom CSS we are going to create for our application
will be compiled by Sass/Compass as well.
[ 15 ]
Sencha Ext JS Overview
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
Downloading Ext JS and Sencha Cmd
Now that we have our environment configured, we can download Ext JS. Ext JS
has some different license flavors: commercial and open source. For this book, we
are going to use the open source one. You can download the open source version
at http://www.sencha.com/products/extjs/details. Scroll until the end of
the page and select OPEN SOURCE GPL LICENSING, as demonstrated in the
following screenshot:
The latest version of Ext JS at the time of writing this book is 5.1.
We also need to download and install Sencha Cmd from http://www.sencha.
com/products/sencha-cmd/download. Sencha Cmd is responsible for creating the
application and making, building, and compiling Sass and Compass to generate the
application's CSS. After the installation of Sencha Cmd, the sencha command will be
available from the terminal application as well.
[ 17 ]
Sencha Ext JS Overview
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 ]
Sencha Ext JS Overview
A video tutorial with step-by-step instructions to set up the
environment for Ext JS is available at http://youtu.be/
B43bEnFBRRc.
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 ]
Get more information Mastering Ext JS Second Edition
Where to buy this book
You can buy Mastering Ext JS Second Edition from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.
www.PacktPub.com
Stay Connected:
and will show you how to create a complete Ext JS
application from scratch.
What you will learn from this book
You'll begin by learning how to create the project's
structure, splash screen, login screen, dynamic menus,
open screens dynamically and master-detail grids,
and much more. You will also learn how to export data to
Excel including PDFs and images, while always keeping
best practices in mind.
Develop a splash and login screen
Following this, you'll discover how to use the MVC
architecture, the new MVVM. Next, you'll learn how to
customize themes and how to prepare the application to
be ready for deployment upon completion.
Exploit master detail grids, master detail
forms, trees, and charts
By the end of the book, you will have learned everything
you need to know to truly master Ext JS and start
building advanced applications.
Create dynamic menus and open
dynamic screens
Mastering Ext JS
Second Edition
Second Edition
Mastering Ext JS
Utilize the MVC, MVVM, and
hybrid architectures
C o m m u n i t y
Handle the information on the server
side–no more JSON files!
Customize and build a theme
Mastering Ext JS
Build an application from scratch
Second Edition
Who this book is written for
$ 49.99 US
£ 30.99 UK
"Community
Experience
Distilled"
Loiane Groner
If you are a developer who is familiar with Ext JS and
want to augment your skills to create even better web
applications, this is the book for you. Basic knowledge
of JavaScript/HTML/CSS and any server-side language
(PHP, Java, C#, Ruby, or Python) is required.
E x p e r i e n c e
Learn how to develop advanced and efficient Internet
applications with Ext JS
Prices do not include
local sales tax or VAT
where applicable
Visit www.PacktPub.com for books, eBooks,
code, downloads, and PacktLib.
D i s t i l l e d
Loiane Groner
In this package, you will find:
The author biography
A preview chapter from the book, Chapter 1 "Sencha Ext JS Overview"
A synopsis of the book’s content
More information on Mastering Ext JS Second Edition
About the Author
Loiane Groner has over 9 years of experience in software development. While at
university, she demonstrated great interest in IT. Loiane worked as a teaching assistant
for 2.5 years and taught algorithms, data structures, and computing theory. She
represented her university at the ACM International Collegiate Programming Contest—
Brazilian Finals (South America Regionals) and also worked as a student delegate of the
Brazilian Computing Society (SBC) for 2 years. Loiane won a merit award in her senior
year for being one of the top three students with the best GPAs in the computer science
department and also graduated with honors.
Loiane has worked at multinational companies, such as IBM. Her areas of expertise
include Java SE and Java EE and also Sencha technologies (Ext JS and Sencha Touch).
Nowadays, Loiane works as a software development manager at a financial institution,
where she manages overseas solutions. She also works as an independent Sencha
consultant and coach.
Loiane is also the author of Ext JS 4 First Look, Mastering Ext JS, Sencha Architect App
Development, and Learning JavaScript Data Structure and Algorithms, all published by
Packt Publishing.
She is passionate about Sencha and Java; she is a leader of Campinas Java Users Group
(CampinasJUG) and a coordinator of Espirito Santo Java Users Group (ESJUG), both
Brazilian JUGs.
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
).
Loiane's profi le is already available on the Packt Publishing website,
.
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!
Mastering Ext JS Second Edition
If you are an Ext JS developer, it probably took you a while to learn the framework. We
know that the Ext JS learning curve is not short. After we have learned the basics, and we
need to use Ext JS in our daily jobs, a lot of questions pop up: how can one component
talk to another? What are the best practices? Is it really worth using this approach and not
another one? Is there any other way I can implement the same feature? This is normal.
This book was written thinking about these developers.
So this is what this book is about: how do we put everything together and create really
nice applications with Ext JS? We are going to create a complete application, from the
mockup of the screens all the way to putting it into production. We are going to create the
application structure, a splash screen, a login screen, a multilingual capability, an activity
monitor, a dynamic menu that depends on user permission, and modules to manage
database information (simple and complex information). And then, we will learn how to
build the application for production, how to customize the theme, and how to debug it.
We will use real-world examples and see how we can implement them using Ext JS
components. And throughout the book, we've also included a lot of tips and best practices
to help you boost your Ext JS knowledge and take you to the next level.
What This Book Covers
Chapter 1, Sencha Ext JS Overview, introduces Sencha Ext JS and its capabilities. This
chapter provides references that you can read before diving into the other chapters of this
book. This is done taking into consideration the possibility that this is your first contact
with the framework.
Chapter 2, Getting Started, introduces the application that is implemented throughout the
book, its features, and the mockup of each screen and module (each chapter covers a
different module), and also demonstrates how to create the structure of the application
using Sencha Cmd and how to create a splash screen.
Chapter 3, The Login Page, explains how to create a login page with Ext JS and how to
handle it on the server side and also shows some extra capabilities, such as adding the
Caps Lock warning message and submitting the login page when pressing the Enter key.
Chapter 4, The Logout and Multilingual Capabilities, covers how to create the logout
capability and also the client-side activity monitor timeout, which means if the user does
not use the mouse or press any key on the keyboard, the system ends the session
automatically and logs out. This chapter also provides an example of multilingual
capability and shows how to create a component so that the user can use it to change the
system's language and locale settings.
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 Overview
Nowadays, there are many flavors for frontend frameworks and libraries in the
market. There are frameworks you can use if you only want to manipulate the
Document Object Model (DOM), frameworks used only for styling, frameworks for
user-friendly components, frameworks used to design your project, and so on. Also
there is Ext JS, a framework used to create Rich Internet Applications (RIA), but it
has many other features than just pretty components.
In this book, we are going to learn how to develop an application from the beginning
to the end with Ext JS 5, also covering some pieces of the backend required to make
our application work. We will learn how to use Ext JS with hands-on examples
covering some components, how they work, and how to use them in each chapter.
But first, you are going to learn what Ext JS is capable of if this is the first time you
have come into contact with the framework.
Understanding Sencha Ext JS
Can we use Ext JS to manipulate DOM? Can we use it if we want pretty and
user-friendly components (forms, grids, trees, and so on)? Can we use it if we need
some nice charts? Can we use the Model View Controller (MVC) architecture to
organize the application with Ext JS? What if we want to use a two-way data-binding
between the Model and the View? Can we do that using Ext JS? And what if we do
not like the colors of Ext JS components' look and feel? Can we easily change it too?
And now a difficult one; can we make a build to obfuscate and optimize the CSS and
JavaScript files of our application using Ext JS? Is Ext JS responsive? Can we use it in
mobile devices?
Amazingly, the answer is positive to all the preceding questions! As we can see, Ext
JS is a complete frontend framework. The mastermind company behind Ext JS is
Sencha Inc. (http://sencha.com).
Sencha Ext JS Overview
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.
Architecture of Ext JS applications
Before we get started, let's make sure we understand a few of the core concepts.
Ext JS is a frontend framework based on JavaScript and HTML5. This means Ext JS
does not connect to the database directly. For storage, we can use one of the types of
HTML5 storage, such as Web SQL or local storage, but these types of storage allow
us to store only 5 MB of data, which is very little for a common application.
Usually, we want to use MySQL, Oracle, MS Server or any other database. To be able
to store information in a database, we need to use a server-side language, such as
PHP, Java, C#, Ruby, Python, Node.js, and so on. Ext JS will communicate with the
server-side language (or web services), and the server will connect to the database or
any other storage (documents repository, for example).
The following diagram exemplifies the architecture of an application developed
with Ext JS:
User
interacts with browser
Components
Grid
Form
Tree
Chart
Button
Toolbar
Window
Request/Response
Data
Model
Proxy
Schema
Session
Store
Layouts
Fit
Border
Card
Accordion
Hbox/Vbox
Center
Absolute
Events
HTTP/S JSON/ XML
Architecture
MVC
MVVM
Hybrid
Asynchronous
Request
PHP/Java/ASP.NET/Python/Ruby
(frameworks)
Web Container (Tomcat, IIS, WebSphere, Apache)
Database (MySQL/Oracle/MS Server/Firebird/others)
document repository and
other services
[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:
•
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.
[9]
Sencha Ext JS Overview
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.
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:
Component
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 ]
Sencha Ext JS Overview
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.
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
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.
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 ]
Sencha Ext JS Overview
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.
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.
For more information please read http://docs.sencha.com/
extjs/5.0/application_architecture/application_
architecture.html.
[ 14 ]
Chapter 1
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.
For more information please read http://docs.sencha.com/
extjs/5.0/core_concepts/theming.html.
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.
Prerequisites for Ext JS and Sencha Cmd
Before downloading Ext JS and Sencha Cmd, we need to set up our computer
to be ready. The following is a list of software needed so that we can create an
Ext JS application:
1. Ruby 1.8 or 1.9: The current version of Ruby is 2.x at the time of writing
this. To be able to create an Ext JS application, we need to have Ruby 1.8 or
1.9 installed. Ruby is required because the theming engine used by Ext JS is
based on Sass and Compass, which are Ruby gems. To download and install
Ruby, please follow the instructions at https://www.ruby-lang.org/en/
installation/.
2. Sass and Compass: These are not CSS frameworks. Sass is a new way of
writing CSS. It is possible to use variables and define functions and mixins.
It is an alternative to Less (maybe you have worked with Less or heard
about it—Sass is very similar). After downloading and installing Ruby,
please install Sass as well. The instructions can be found at http://sasslang.com/install (follow the command-line instructions). Compass is a
Sass framework and is also required. Please install it as well from http://
compass-style.org/install/. Sass and Compass are the heart of the Ext
JS theming engine. All custom CSS we are going to create for our application
will be compiled by Sass/Compass as well.
[ 15 ]
Sencha Ext JS Overview
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
Downloading Ext JS and Sencha Cmd
Now that we have our environment configured, we can download Ext JS. Ext JS
has some different license flavors: commercial and open source. For this book, we
are going to use the open source one. You can download the open source version
at http://www.sencha.com/products/extjs/details. Scroll until the end of
the page and select OPEN SOURCE GPL LICENSING, as demonstrated in the
following screenshot:
The latest version of Ext JS at the time of writing this book is 5.1.
We also need to download and install Sencha Cmd from http://www.sencha.
com/products/sencha-cmd/download. Sencha Cmd is responsible for creating the
application and making, building, and compiling Sass and Compass to generate the
application's CSS. After the installation of Sencha Cmd, the sencha command will be
available from the terminal application as well.
[ 17 ]
Sencha Ext JS Overview
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 ]
Sencha Ext JS Overview
A video tutorial with step-by-step instructions to set up the
environment for Ext JS is available at http://youtu.be/
B43bEnFBRRc.
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 ]
Get more information Mastering Ext JS Second Edition
Where to buy this book
You can buy Mastering Ext JS Second Edition from the Packt Publishing website.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and most internet
book retailers.
Click here for ordering and shipping details.
www.PacktPub.com
Stay Connected:
