book

Mastering ExtJS - Second Edition

Name: Mastering ExtJS - Second Edition
Author: Loiane Avancini
ISBN: 9781784390457

by Loiane Avancini

February 2015

Intermediate to advanced

400 pages

8h 50m

English

Packt Publishing

Read now

Unlock full access

Mastering Ext JS Second Edition
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 moreWhy 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 codeErrataPiracyQuestions
1. Sencha Ext JS Overview
Understanding Sencha Ext JSArchitecture of Ext JS applications
Ext JS overview
Basic tutorialClass systemComponentsThe component hierarchyGridPanelTreePanelFormsOther componentsLayoutsData packageThe MVC and MVVM architecturesLook and feel of Ext JS applications
Installing Ext JS
Prerequisites for Ext JS and Sencha CmdDownloading Ext JS and Sencha CmdOffline documentationIDE
Summary
2. Getting Started
Preparing the development environment
Presenting the application and its capabilities
The splash screenThe login screenThe main screenUser administrationMySQL table managementContent management controlCharts
Creating the application with Sencha Cmd
A quick word about MVCCreating the applicationLooking out for changes with the watch commandApplying the first changes in our appUnderstanding the Application.js file
Creating the loading page
Summary
3. The Login Page
The Login screen
Creating the Login screen
Client-side validationsCreating custom VTypesAdding the toolbar with buttonsRunning the codeA quick overview about Ext JS dynamic class loadingAdding Font Awesome support (Glyph icons)Creating the Login ControllerIntroducing the MVVM architectureCreating the ViewController for Login ViewBinding the ViewController to the ViewListening to the button click eventCancel Button Listener implementationSubmit Button Listener implementationCreating the User and Groups tablesHandling the Login page on the serverConnecting to the databaseLogin.phpHandling 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 authenticatingForm submit on EnterCaps Lock warning message
Summary
4. The Logout and Multilingual Capabilities
The base of the application – view/main/Main.jsThe ViewportUsing the Viewport pluginOrganizing the main screen using the Border layoutCreating the main TabPanel componentCreating the footerA quick word about modular CSSCreating the Header classCreating the Header CSSCustomizing the Font Awesome icon colorsThe main screen and MVVMThe main ViewModel
Logout capability
Handling the logout on the serverAjax request success versus failure
Client-side activity monitor
The multilingual capability
Creating the change language componentAdding the CSS – country flagsUsing the translation componentCreating the multilingual filesApplying the translation on the application's componentsHTML5 local storageHandling change language in real timeThe early life of the ViewControllerUsing locale files to translate Ext JS
Summary
5. Advanced Dynamic Menu
An overview of the dynamic menuExt JS TreePanelAccordion layout
The database model – groups, menus, and permissions
The dynamic menu – an MVC approach
Creating the modelsWorking with the hasMany associationCreating the store-loading menu from the serverHandling the dynamic menu on the serverFetching the user permissionsFetching the modules the user is entitled toFetching the menu options based on modules and permissionsCreating the menu with the Accordion layout and TreePanelCreating the menu ControllerRendering the menu from nested JSON (the hasMany association)Using glyphs in TreePanel – working with overridesMenu locale supportOpening a menu item programmatically
Summary
6. User Management
Managing usersListing all the users using a simple GridPanelCreating a User ModelWorking with schemasDefining store-less grids with Users GridPanelThe Users screenWorking with docked itemsWorking with singletons – Ext JS class systemPanel versus Container versus ComponentDeclaring the User ViewModelWorking with ViewModel data bindingCreating the User ViewControllerAdding and editing a new userCreating the Edit View – form within a windowCreating the Group ModelThe Groups StoreController – listening to the Add buttonController – listening to the Edit buttonController – listening to the Cancel buttonController – saving a userUsing Model validatorsPreviewing a file before uploadingDeleting a userDisplaying the group name in the Grid
Summary
7. Static Data Management
Presenting the tables
Creating a Model
Abstract ModelAdapting the Base Model schemaSpecific models
Creating a Store
Abstract StoreSpecific Store
Creating an abstract GridPanel for reuse
To initComponent or not?Handling the Widget Column in the MVC architectureLive Search plugin versus Filter pluginSpecific GridPanels for each tableAdding the Live Search CSS
Generic Controller for all tables
Finding the correct selectorUsing itemId versus id – Ext.Cmp is bad!Adding a new record on the GridPanelEditing an existing recordDeleting the handling Widget Column in the ControllerSaving the changesValidating cellediting in GridPanelModel validatorsThe autoSync configurationCanceling the changesClearing the filterListening 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 ModelFilms ModelViewFilm data grid (with paging)Creating the Base GridAdding the RowExpander pluginActor-Language – handling a hasOne associationAdding the PagingToolbarHandling paging on the server sidePaging queries on MySQL, Oracle, and Microsoft SQL Server
Creating the films container
Handling many-to-many associationsLoading nested JSON from the serverChanging the ViewModel – chained storesFilm-Actor – handling many-to-many associationsFilm-Category – handling many-to-many associations
Creating the ViewController
The base ViewControllerCreating the FilmsControllerAdding or editing a filmPackt.view.base.WindowFormThe films formFilm categoriesFilm ActorsSearch Actors – Live Search comboboxModelStoreLive Search comboboxComplementing the ViewModelWorking with formulas and two-way data binding
The Films ViewController
The createDialog methodGetting the selected actor from Live SearchSaving the form and working with sessionsCustom Writer – saving associated dataSaving session data manually
Summary
9. Adding Extra Capabilities
Exporting a GridPanel to PDF and ExcelExporting to PDFGenerating the PDF file on the server – PHPGenerating and viewing the PDF file with JavaScript – HTML5Exporting to Excel
Printing GridPanel content with the GridPrinter plugin
Creating a Sales by Film Category chart
Ext JS 5 charts and terminologyAdding Sencha Charts to the projectCreating the Store inside the ViewModelPie chart3D column chartThe Chart panelThe ViewControllerChanging the chart typeExporting charts to images (PNG or JPEG)
Summary
10. Routing, Touch Support, and Debugging
Ext JS routingDefault tokenLoading a Controller programmaticallyHandling routesRefactoring the Menu codeHandling unmatched routesHandling 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 colorCustomizing componentsSome useful tips while creating new themesCreating custom UIsApplying the UI
Packaging the application for production
Compiling ext-localeWhat to deploy in productionBenefits
Summary
Index

Overview

Delve into 'Mastering ExtJS - Second Edition' and unlock the potential of Ext JS to create advanced and efficient Internet applications. With this book, you will learn how to fully utilize Ext JS to build well-structured, responsive, and feature-rich applications. Gain a deeper understanding of Ext JS components and architecture to take your web development skills to the next level.

What this Book will help me do

Build sophisticated Ext JS applications from scratch with practical features.
Leverage the MVC and MVVM architectures in Ext JS for better code organization.
Implement dynamic and interactive UI elements, including grids, forms, and charts.
Customize Ext JS themes and prepare your application for production environments.
Effectively manage and handle server-side information and data workflows.

Author(s)

Loiane Avancini is a seasoned software engineer and author with extensive experience developing applications using JavaScript and Ext JS frameworks. Loiane has written several technical books and is known for her clear teaching style and deep insights into modern web technologies. With years of experience in the industry, she shares practical knowledge and hands-on techniques in her books.

Who is it for?

This book is aimed at developers who have a basic understanding of Ext JS and familiarity with JavaScript, HTML, and CSS, looking to enhance their skills. It is ideal for those aspiring to build complex and feature-rich web applications. Whether you're improving your current projects or creating new solutions from scratch, this book serves as a valuable resource. Developers proficient in server-side languages like PHP, Java, or Python will find this guide highly effective.

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 9781784390457

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills