Mastering Ext JS Learn how to develop advanced and efficient Internet applications with Ext JS 2nd editon by Loiane Groner 1784399434 9781784399436

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