Mastering Ext JS - Second Edition
()
About this ebook
- 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
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.
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.
Read more from Loiane Groner
Learning JavaScript Data Structures and Algorithms Rating: 5 out of 5 stars5/5Learning JavaScript Data Structures and Algorithms - Second Edition Rating: 0 out of 5 stars0 ratingsJavaScript Regular Expressions Rating: 3 out of 5 stars3/5
Related to Mastering Ext JS - Second Edition
Related ebooks
Node.js 6.x Blueprints Rating: 0 out of 5 stars0 ratingsNode Web Development, Second Edition Rating: 0 out of 5 stars0 ratingsMastering Web Application Development with Express Rating: 0 out of 5 stars0 ratingsjQuery UI 1.7: The User Interface Library for jQuery Rating: 0 out of 5 stars0 ratingsjQuery Design Patterns Rating: 0 out of 5 stars0 ratingsLearning Underscore.js Rating: 0 out of 5 stars0 ratingsAngularJS Web Application Development Blueprints Rating: 0 out of 5 stars0 ratingsLearning Highcharts Rating: 0 out of 5 stars0 ratingsTypeScript Blueprints Rating: 0 out of 5 stars0 ratingsEntity Framework Tutorial - Second Edition Rating: 0 out of 5 stars0 ratingsPHP 5 CMS Framework Development - 2nd Edition Rating: 0 out of 5 stars0 ratingsMariaDB Essentials Rating: 0 out of 5 stars0 ratingsXamarin Mobile Application Development for Android - Second Edition Rating: 0 out of 5 stars0 ratingsjQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsInstant Highcharts Rating: 0 out of 5 stars0 ratingsPhantomJS Cookbook Rating: 0 out of 5 stars0 ratingsAdministrating Solr Rating: 0 out of 5 stars0 ratingsAngularJS Web Application Development Cookbook Rating: 0 out of 5 stars0 ratingsLearning Highcharts 4 Rating: 0 out of 5 stars0 ratingsPHP Ajax Cookbook Rating: 2 out of 5 stars2/5jQuery Hotshot Rating: 0 out of 5 stars0 ratingsInstant Hands-on Testing with PHPUnit How-to Rating: 0 out of 5 stars0 ratingsRapid Application Development With CakePHP Rating: 0 out of 5 stars0 ratingsInstant HTML5 Geolocation How-To Rating: 0 out of 5 stars0 ratingsWebGL A Complete Guide - 2021 Edition Rating: 0 out of 5 stars0 ratingsLearning Magento Theme Development Rating: 0 out of 5 stars0 ratingsMastering MeteorJS Application Development Rating: 4 out of 5 stars4/5Multi-Tier Application Programming with PHP: Practical Guide for Architects and Programmers Rating: 0 out of 5 stars0 ratingsMongoDB High Availability Rating: 5 out of 5 stars5/5Responsive Design High Performance Rating: 0 out of 5 stars0 ratings
Internet & Web For You
The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5The Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5SEO For Dummies Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5Wireless Hacking 101 Rating: 4 out of 5 stars4/5Hacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 4 out of 5 stars4/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5Six Figure Blogging In 3 Months Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsPython QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsRemote/WebCam Notarization <<Extended>> Commonwealth of Virginia Rating: 0 out of 5 stars0 ratingsCreate Something Awesome: How Creators are Profiting from Their Passion in the Creator Economy Rating: 0 out of 5 stars0 ratingsGet Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsSix Figure Blogging Blueprint Rating: 5 out of 5 stars5/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5Podcasting For Dummies Rating: 4 out of 5 stars4/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5
Reviews for Mastering Ext JS - Second Edition
0 ratings0 reviews
Book preview
Mastering Ext JS - Second Edition - Loiane Groner
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
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 <feedback@packtpub.com>, 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 <copyright@packtpub.com> 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 <questions@packtpub.com>, 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