Mastering Ext JS - Second Edition

Loiane Groner

• Editorial: Packt Publishing
• Año: 2015
• ISBN:
  9781784399436
• Categoría: Informatica
• Categoría: Programmazione in JavaScript

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.

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 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 (wit...