Mastering Ext JS - Second Edition

By Loiane Groner

About This Book

• Build a complete application with Ext JS from scratch to the production build
• Excellent tips and tricks to make your web applications stand out
• Written in an engaging and easy-to-follow conversational style, with practical examples covering the server side as well as MySQL

Who This Book Is For

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.

• Language: English
• Publisher: Packt Publishing
• Release date: Feb 24, 2015
• ISBN: 9781784399436

Loiane Groner

Loiane Groner lives in São Paulo, Brazil, and has over 8 years of software development experience. While at university, Loiane demonstrated great interest in IT. She worked as a Teaching Assistant for 2 years and 6 months in the Algorithms, Data Structures, and Computing Theory Department. She represented her university at the ACM International Collegiate Programming Contest - Brazilian Finals (South America Regionals) and also worked as Student Delegate of SBC (Brazilian Computing Society) for 2 years. She won a merit award in her senior year for being one of the top 3 students with the best GPAs in the Computer Science department, and she also graduated with honors.She has already in her career 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, she is working 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 and Mastering Ext JS, both published by Packt.She is passionate about Sencha and Java, and she is the CampinasJUG (Campinas Java Users Group) leader and ESJUG (Espirito Santo Java Users Group) coordinator, both of which are Brazilian JUGs.Loiane also contributes to the software development community through her blogs: http://loianegroner.com (English) and http://loiane.com (Portuguese-BR), where she writes about her IT career, Ext JS, Sencha Touch, Spring Framework, and she also discusses general development notes and publishes screencasts.

Book preview

Table of Contents

Mastering Ext JS Second Edition

Credits

About the Author

Acknowledgments

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Sencha Ext JS Overview

Understanding Sencha Ext JS

Architecture of Ext JS applications

Ext JS overview

Basic tutorial

Class system

Components

The component hierarchy

GridPanel

TreePanel

Forms

Other components

Layouts

Data package

The MVC and MVVM architectures

Look and feel of Ext JS applications

Installing Ext JS

Prerequisites for Ext JS and Sencha Cmd

Downloading Ext JS and Sencha Cmd

Offline documentation

IDE

Summary

2. Getting Started

Preparing the development environment

Presenting the application and its capabilities

The splash screen

The login screen

The main screen

User administration

MySQL table management

Content management control

Charts

Creating the application with Sencha Cmd

A quick word about MVC

Creating the application

Looking out for changes with the watch command

Applying the first changes in our app

Understanding the Application.js file

Creating the loading page

Summary

3. The Login Page

The Login screen

Creating the Login screen

Client-side validations

Creating custom VTypes

Adding the toolbar with buttons

Running the code

A quick overview about Ext JS dynamic class loading

Adding Font Awesome support (Glyph icons)

Creating the Login Controller

Introducing the MVVM architecture

Creating the ViewController for Login View

Binding the ViewController to the View

Listening to the button click event

Cancel Button Listener implementation

Submit Button Listener implementation

Creating the User and Groups tables

Handling the Login page on the server

Connecting to the database

Login.php

Handling the return of the server – logged in or not?

Reusing code by creating a Util class

Enhancing the Login screen

Applying a loading mask on the form while authenticating

Form submit on Enter

Caps Lock warning message

Summary

4. The Logout and Multilingual Capabilities

The base of the application – view/main/Main.js

The Viewport

Using the Viewport plugin

Organizing the main screen using the Border layout

Creating the main TabPanel component

Creating the footer

A quick word about modular CSS

Creating the Header class

Creating the Header CSS

Customizing the Font Awesome icon colors

The main screen and MVVM

The main ViewModel

Logout capability

Handling the logout on the server

Ajax request success versus failure

Client-side activity monitor

The multilingual capability

Creating the change language component

Adding the CSS – country flags

Using the translation component

Creating the multilingual files

Applying the translation on the application's components

HTML5 local storage

Handling change language in real time

The early life of the ViewController

Using locale files to translate Ext JS

Summary

5. Advanced Dynamic Menu

An overview of the dynamic menu

Ext JS TreePanel

Accordion layout

The database model – groups, menus, and permissions

The dynamic menu – an MVC approach

Creating the models

Working with the hasMany association

Creating the store-loading menu from the server

Handling the dynamic menu on the server

Fetching the user permissions

Fetching the modules the user is entitled to

Fetching the menu options based on modules and permissions

Creating the menu with the Accordion layout and TreePanel

Creating the menu Controller

Rendering the menu from nested JSON (the hasMany association)

Using glyphs in TreePanel – working with overrides

Menu locale support

Opening a menu item programmatically

Summary

6. User Management

Managing users

Listing all the users using a simple GridPanel

Creating a User Model

Working with schemas

Defining store-less grids with Users GridPanel

The Users screen

Working with docked items

Working with singletons – Ext JS class system

Panel versus Container versus Component

Declaring the User ViewModel

Working with ViewModel data binding

Creating the User ViewController

Adding and editing a new user

Creating the Edit View – form within a window

Creating the Group Model

The Groups Store

Controller – listening to the Add button

Controller – listening to the Edit button

Controller – listening to the Cancel button

Controller – saving a user

Using Model validators

Previewing a file before uploading

Deleting a user

Displaying the group name in the Grid

Summary

7. Static Data Management

Presenting the tables

Creating a Model

Abstract Model

Adapting the Base Model schema

Specific models

Creating a Store

Abstract Store

Specific Store

Creating an abstract GridPanel for reuse

To initComponent or not?

Handling the Widget Column in the MVC architecture

Live Search plugin versus Filter plugin

Specific GridPanels for each table

Adding the Live Search CSS

Generic Controller for all tables

Finding the correct selector

Using itemId versus id – Ext.Cmp is bad!

Adding a new record on the GridPanel

Editing an existing record

Deleting the handling Widget Column in the Controller

Saving the changes

Validating cellediting in GridPanel

Model validators

The autoSync configuration

Canceling the changes

Clearing the filter

Listening to Store events in the Controller

Debug tip – Sencha extension for Chrome

Firefox extension – Illuminations for Developers

Summary

8. Content Management

Managing information – films

Displaying the Film data grid

The Film Model

Films ModelView

Film data grid (with paging)

Creating the Base Grid

Adding the RowExpander plugin

Actor-Language – handling a hasOne association

Adding the PagingToolbar

Handling paging on the server side

Paging queries on MySQL, Oracle, and Microsoft SQL Server

Creating the films container

Handling many-to-many associations

Loading nested JSON from the server

Changing the ViewModel – chained stores

Film-Actor – handling many-to-many associations

Film-Category – handling many-to-many associations

Creating the ViewController

The base ViewController

Creating the FilmsController

Adding or editing a film

Packt.view.base.WindowForm

The films form

Film categories

Film Actors

Search Actors – Live Search combobox

Model

Store

Live Search combobox

Complementing the ViewModel

Working with formulas and two-way data binding

The Films ViewController

The createDialog method

Getting the selected actor from Live Search

Saving the form and working with sessions

Custom Writer – saving associated data

Saving session data manually

Summary

9. Adding Extra Capabilities

Exporting a GridPanel to PDF and Excel

Exporting to PDF

Generating the PDF file on the server – PHP

Generating and viewing the PDF file with JavaScript – HTML5

Exporting to Excel

Printing GridPanel content with the GridPrinter plugin

Creating a Sales by Film Category chart

Ext JS 5 charts and terminology

Adding Sencha Charts to the project

Creating the Store inside the ViewModel

Pie chart

3D column chart

The Chart panel

The ViewController

Changing the chart type

Exporting charts to images (PNG or JPEG)

Summary

10. Routing, Touch Support, and Debugging

Ext JS routing

Default token

Loading a Controller programmatically

Handling routes

Refactoring the Menu code

Handling unmatched routes

Handling parameters

Using the responsive design plugin

Enabling touch support

From Ext JS to mobile

Debugging Ext JS applications

Testing Ext JS applications

Helpful tools

Third-party components and plugins

Summary

11. Preparing for Production and Themes

Before we start

Creating a new theme

Changing the base color

Customizing components

Some useful tips while creating new themes

Creating custom UIs

Applying the UI

Packaging the application for production

Compiling ext-locale

What to deploy in production

Benefits

Summary

Index

Mastering Ext JS Second Edition

---

Mastering Ext JS Second Edition

Copyright © 2015 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2013

Second edition: February 2015

Production reference: 1180215

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-78439-045-7

www.packtpub.com

Credits

Author

Loiane Groner

Reviewers

Peter Holcomb

Girish Srivastava

Thorsten Suckow-Homberg

Commissioning Editor

Ashwin Nair

Acquisition Editor

Kevin Colaco

Content Development Editor

Adrian Raposo

Technical Editor

Vijin Boricha

Copy Editor

Sarang Chari

Project Coordinator

Sanchita Mandal

Proofreaders

Simran Bhogal

Maria Gould

Paul Hindle

Indexer

Hemangini Bari

Graphics

Abhinash Sahu

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

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, http://loianegroner.com (English) and http://loiane.com (Portuguese-BR), 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 (https://www.facebook.com/loianegroner) and Twitter (@loiane).

Loiane's profile is already available on the Packt Publishing website, https://www.packtpub.com/books/info/authors/loiane-groner.

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!

About the Reviewers

Peter Holcomb has been working with Ext JS for several years, right from version 2, and has thoroughly enjoyed being a part of the Sencha community as it has grown. A tinkerer at heart, Peter tries to spend his free time on a variety of projects to keep his skills sharp and stay on top of new frameworks and technologies. He's currently a lead frontend engineer at SailPoint Technologies, Inc., a company that he's been fortunate to be a part of for over 8 years. He lives in Austin with his wife, Courtney, and two children and thoroughly enjoys breakfast tacos.

Girish Srivastava works as a technical associate at Vision Technologies, Bengaluru (formerly, Bangalore). He is a good speaker and an industry expert on data warehousing and web-based solutions and their implementations. He used to facilitate training sessions on different technologies such as Java SE/Java EE, JavaScript, Ext JS, IBM PureData System for Analytics (IBM Netezza), Perl/CGI, SAP BO, Tableau, and so on. Girish has worked as a technical consultant in the IT industry.

I would like to thank the Almighty, my parents, B.M.P. Kiran and Mina Devi, my family, and my loveable friends, who have supported and backed me throughout my life. I would also like to thank Rawal Thakur, the managing director of my company, who gave me brilliant opportunities, ample time, and some extraordinary resources to explore new and emerging technologies. My thanks also goes to Packt Publishing for selecting me as one of the technical reviewers for this wonderful book. It is an honor to be a part of it.

Thorsten Suckow-Homberg is a software developer from Aachen, Germany. He took his first programming steps with AmigaBASIC, peeked into Turbo Pascal, Modula-3, and learned to love the strange yet wonderful abstract world of object-oriented programming (OOP) with Java. Most of the time, he works on PHP/JavaScript-driven web applications, such as conjoon.com, of which he is the main developer. If he's not traveling around teaching JavaScript and Ext JS, you'll most likely find him in the woods, riding his mountain bike, or sitting in front of his desk, sipping coffee and engineering code.

www.PacktPub.com

Support files, eBooks, discount offers, and more

For support files and downloads related to your book, please visit www.PacktPub.com.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

https://www2.packtpub.com/books/subscription/packtlib

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.

Why subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark content

On demand and accessible via a web browser

Free access for Packt account holders

If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view 9 entirely free books. Simply use your login credentials for immediate access.

Preface

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 real-world 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.

What you need for this book

The following is a list of the software you will need to have installed prior to executing the examples of the book. The following list covers the exact software used to implement and execute the examples of this book, but you can use any similar software that you already have installed that has the same features.

For a browser with a debugger tool, use the following:

Firefox with Firebug: https://www.mozilla.org/firefox/ and http://getfirebug.com/

Google Chrome: http://www.google.com/chrome

For a web server with PHP support, use the following:

Xampp: http://www.apachefriends.org/en/xampp.html

For the database, use the following:

MySQL: http://dev.mysql.com/downloads/mysql/

MySQL Workbench: http://dev.mysql.com/downloads/tools/workbench/

MySQL Sakila sample database: http://dev.mysql.com/doc/index-other.html and http://dev.mysql.com/doc/sakila/en/index.html

For Sencha Cmd and the required tools, use the following:

Sencha Cmd: http://www.sencha.com/products/sencha-cmd/download

Ruby 1.8 or 1.9: http://www.ruby-lang.org/en/downloads/

Sass: http://sass-lang.com/

Compass: http://compass-style.org/

Java JDK (version 7 or later): http://www.oracle.com/technetwork/java/javase/downloads/index.html

Java environment variables: http://docs.oracle.com/javase/tutorial/essential/environment/paths.html

Apache ANT: http://ant.apache.org/bindownload.cgi

Apache ANT environment variable: http://ant.apache.org/manual/install.html

And of course, Ext JS: http://www.sencha.com/products/extjs/

We will use Ext JS 5.0.1 in this book.

Who this book is for

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.

Conventions

In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and an explanation of their meaning.

Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: If we want to create a class to represent the client details, we could name it ClientDetails.

A block of code is set as follows:

Ext.define('Packt.model.film.Film', {

    extend: 'Packt.model.staticData.Base', //#1

When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:

Ext.application({

    name: 'Packt',

 

    extend: 'Packt.Application',

   

    autoCreateViewport: 'Packt.view.main.Main'

 

});

Any command-line input or output is written as follows:

sencha generate app Packt ../masteringextjs

New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: Scroll until the end of the page and select OPEN SOURCE GPL LICENSING.

Note

Warnings or important notes appear in a box like this.

Tip

Tips and tricks appear like this.

Reader feedback

Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.

To send us general feedback, simply e-mail <[e-mail]>, and mention the book's title in the subject of your message.

If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide at www.packtpub.com/authors.

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book in the search field. The required information will appear under the Errata section.

Piracy

Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.

Please contact us at <[e-mail]> with a link to the suspected pirated material.

We appreciate your help in protecting our authors and our ability to bring you valuable content.

Questions

If you have a problem with any aspect of this book, you can contact us at <[e-mail]>, and we will do our best to address the problem.

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:

Ext JS overview

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

Basic tutorial

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

Basic tutorial and Ext JS overview: http://www.sencha.com/products/extjs/up-and-running

Ext JS guides: http://docs.sencha.com/extjs/5.0/

Ext JS documents: http://docs.sencha.com/extjs/5.0/apidocs/

Ext JS examples: http://dev.sencha.com/ext/5.0.1/examples/index.html

Forum (become part of the community): http://www.sencha.com/forum/

Class system

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

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

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

Note

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

Components

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

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

The component hierarchy

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

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

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