Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Mastering ExtJS - Second Edition - Second Edition
Mastering ExtJS - Second Edition - Second Edition

Mastering ExtJS - Second Edition: Learn how to develop advanced and efficient Internet applications with Ext JS, Second Edition

Arrow left icon
Profile Icon Loiane Avancini
Arrow right icon
$22.99 $32.99
Book Feb 2015 400 pages 2nd Edition
eBook
$22.99 $32.99
Print
$54.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Loiane Avancini
Arrow right icon
$22.99 $32.99
Book Feb 2015 400 pages 2nd Edition
eBook
$22.99 $32.99
Print
$54.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$22.99 $32.99
Print
$54.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
Table of content icon View table of contents Preview book icon Preview Book

Mastering ExtJS - Second Edition - Second Edition

Chapter 1. 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 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:

Architecture of Ext JS applications

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.

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 hierarchy

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 component hierarchy

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.

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.

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

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.

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.

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.

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.

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://sass-lang.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.
  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/index-jsp-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:

Prerequisites for Ext JS and Sencha Cmd

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.

Note

All the software required to set up the environment mentioned in this book is available for Linux, Windows, and Mac OS.

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:

Downloading Ext JS and Sencha Cmd

Note

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.

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:

Downloading Ext JS and Sencha Cmd

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:

Offline documentation

Unzip the docs inside the Xampp htdocs folder as well and access your localhost, as shown in the following screenshot:

Offline documentation

Note

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.

Left arrow icon Right arrow icon

Key benefits

Description

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.

What you will learn

Develop a splash and login screen Create dynamic menus and open dynamic screens Exploit master detail grids, master detail forms, trees, and charts Utilize the MVC, MVVM, and hybrid architectures Handle the information on the server side–no more JSON files! Customize and build a theme Build an application from scratch

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Feb 24, 2015
Length 400 pages
Edition : 2nd Edition
Language : English
ISBN-13 : 9781784390457

What do you get with eBook?

Product feature icon Instant access to your Digital eBook purchase
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want

Product Details

Publication date : Feb 24, 2015
Length 400 pages
Edition : 2nd Edition
Language : English
ISBN-13 : 9781784390457

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together

Stars icon
Total $ 52.98 76.98 24.00 saved
Learning Ext JS_Fourth Edition
$29.99 $43.99
Mastering ExtJS - Second Edition
$22.99 $32.99
=
Book stack Total $ 52.98 76.98 24.00 saved Stars icon

Table of Contents

13 Chapters
Preface Chevron down icon Chevron up icon
1. Sencha Ext JS Overview Chevron down icon Chevron up icon
2. Getting Started Chevron down icon Chevron up icon
3. The Login Page Chevron down icon Chevron up icon
4. The Logout and Multilingual Capabilities Chevron down icon Chevron up icon
5. Advanced Dynamic Menu Chevron down icon Chevron up icon
6. User Management Chevron down icon Chevron up icon
7. Static Data Management Chevron down icon Chevron up icon
8. Content Management Chevron down icon Chevron up icon
9. Adding Extra Capabilities Chevron down icon Chevron up icon
10. Routing, Touch Support, and Debugging Chevron down icon Chevron up icon
11. Preparing for Production and Themes Chevron down icon Chevron up icon
Index Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

How do I buy and download an eBook? Chevron down icon Chevron up icon

Where there is an eBook version of a title available, you can buy it from the book details for that title. Add either the standalone eBook or the eBook and print book bundle to your shopping cart. Your eBook will show in your cart as a product on its own. After completing checkout and payment in the normal way, you will receive your receipt on the screen containing a link to a personalised PDF download file. This link will remain active for 30 days. You can download backup copies of the file by logging in to your account at any time.

If you already have Adobe reader installed, then clicking on the link will download and open the PDF file directly. If you don't, then save the PDF file on your machine and download the Reader to view it.

Please Note: Packt eBooks are non-returnable and non-refundable.

Packt eBook and Licensing When you buy an eBook from Packt Publishing, completing your purchase means you accept the terms of our licence agreement. Please read the full text of the agreement. In it we have tried to balance the need for the ebook to be usable for you the reader with our needs to protect the rights of us as Publishers and of our authors. In summary, the agreement says:

  • You may make copies of your eBook for your own use onto any machine
  • You may not pass copies of the eBook on to anyone else
How can I make a purchase on your website? Chevron down icon Chevron up icon

If you want to purchase a video course, eBook or Bundle (Print+eBook) please follow below steps:

  1. Register on our website using your email address and the password.
  2. Search for the title by name or ISBN using the search option.
  3. Select the title you want to purchase.
  4. Choose the format you wish to purchase the title in; if you order the Print Book, you get a free eBook copy of the same title. 
  5. Proceed with the checkout process (payment to be made using Credit Card, Debit Cart, or PayPal)
Where can I access support around an eBook? Chevron down icon Chevron up icon
  • If you experience a problem with using or installing Adobe Reader, the contact Adobe directly.
  • To view the errata for the book, see www.packtpub.com/support and view the pages for the title you have.
  • To view your account details or to download a new copy of the book go to www.packtpub.com/account
  • To contact us directly if a problem is not resolved, use www.packtpub.com/contact-us
What eBook formats do Packt support? Chevron down icon Chevron up icon

Our eBooks are currently available in a variety of formats such as PDF and ePubs. In the future, this may well change with trends and development in technology, but please note that our PDFs are not Adobe eBook Reader format, which has greater restrictions on security.

You will need to use Adobe Reader v9 or later in order to read Packt's PDF eBooks.

What are the benefits of eBooks? Chevron down icon Chevron up icon
  • You can get the information you need immediately
  • You can easily take them with you on a laptop
  • You can download them an unlimited number of times
  • You can print them out
  • They are copy-paste enabled
  • They are searchable
  • There is no password protection
  • They are lower price than print
  • They save resources and space
What is an eBook? Chevron down icon Chevron up icon

Packt eBooks are a complete electronic version of the print edition, available in PDF and ePub formats. Every piece of content down to the page numbering is the same. Because we save the costs of printing and shipping the book to you, we are able to offer eBooks at a lower cost than print editions.

When you have purchased an eBook, simply login to your account and click on the link in Your Download Area. We recommend you saving the file to your hard drive before opening it.

For optimal viewing of our eBooks, we recommend you download and install the free Adobe Reader version 9.