Ext JS Essentials by Duncan, Andrew -- Read -- Imperial Library of Trantor

Index

Ext JS Essentials

Table of Contents Ext JS Essentials Credits About the Authors 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. Getting to Know Ext JS

What is Ext JS What Ext JS isn't Use cases What's new in Ext JS 5

Touch support Architectural improvements Responsive layouts Component enhancements

What you need to know

Development environment

Project introduction Creating our application with Sencha Cmd

Installing Sencha Cmd Downloading the framework Applications, packages, and workspaces Generating our workspace Generating our application

Getting production ready

Deployment recommendations

GZip Minification and concatenation Image optimization

Anatomy of our application How it works

The bootstrapped launch process JavaScript to HTML The event system Managing data Browser API interaction Routing

Summary

2. Mastering the Framework's Building Blocks

Defining classes The magic behind Ext.Loader

The class definition process Defining dependencies Loader paths Ext.Loader and Sencha Cmd Our dependency root

Adding class members

Properties Methods Statics Statics in subclasses Singletons

Extending classes Overriding classes

Requiring our override class Targeting overrides to framework versions

Configuring classes

Setting a configuration value Overriding defaults Platform-specific configs

Summary

3. Reacting to User and Application Interactions

Background Defining event handlers in config objects

Button handlers The on method

Listener options Firing events Listening for events on elements

Event delegation

Mouse events Keyboard events

KeyMap

Touch events

Event normalization Gestures

Summary

4. Architecting an Ext JS Application

Getting the most from Sencha Cmd

Generating application components

Generating models Generating views Generating controllers

Upgrading your application Refreshing application metadata Triggering automatic builds

MVC and MVVM

What is MVC?

Explaining the abbreviations

Model View Controller

Putting this together Ext JS naming convention and directory structure The benefits and drawbacks of using MVC

What is MVVM?

Addressing the concerns Explaining the abbreviations

Model View ViewModel

Business logic

ViewControllers Controllers

Cross-class communication with events Taking your application offline

Why should we design offline first? What can we do about this? How can we do this? Offline architecture Syncing data

Summary

5. Modeling Data Structures for Your UI

Defining models

Fields Field validation Custom field types Custom data converters

Working with stores

Simple stores

Store stats Retrieving a record Finding specific records Complex searches Filtering a store

Configuration-based filtering

Sorting a store

Configuration-based sorting

Grouping

Configuration-based grouping

Chained stores TreeStores

Ext.data.TreeModels Creating a TreeStore Populating a TreeStore

Getting data into your application

Ext.Ajax

Simple AJAX calls Handling errors Other useful configurations

Proxies

AJAX proxies LocalStorage proxies

REST proxies

Data associations

One-to-many

Configuring a proxy and data source Defining the association

hasMany config

The reference config Exploring requests

Many-to-many

Configuring a proxy and data source Defining the association Loading the associated data

Saving data

CRUD endpoints Data writers

Summary

6. Combining UI Widgets into the Perfect Layout

Layouts and how they work

How the layout system works

The component layout Using the border layout

Starting with the Viewport Configuring the border layout

Using the fit layout Using the HBox layout

Widths in HBox layouts

Fixed width Flex width

Packing items together

Using the VBox layout

Alignment and packing

align: String pack: String

Responsive layouts

Ext.mixin.Responsive and Ext.plugin.Responsive ResponsiveConfig rules

Summary

7. Constructing Common UI Widgets

Anatomy of a UI widget

Components and HTML

The component lifecycle

The creation lifecycle

constructor Config options processed initComponent render boxready activate (*) show (*)

The destruction process

hide (*) deactivate (*) destroy

Component Queries

xtypes Sample component structure Queries with Ext.ComponentQuery

Finding components based on xtype Finding components based on attributes Finding components based on itemIds Finding components based on member functions

Scoped Component Queries

up down query

Hierarchical data with trees

Binding to a data source Defining a tree panel

Displaying tabular data

Product data Product grid Customizing column displays

Column renderers

Template columns Grid widgets

Inputting data with forms

Defining a form Displaying our form Populating our form Persisting updates

Data-bound views

Defining our users' data view

Store Template Item selector

Styling the view

Summary

8. Creating a Unique Look and Feel with SASS

Applying themes to your application

Configuring a new theme

Creating a custom theme

Theme architecture Generating a theme package Anatomy of a theme Cross-browser styling Theme inheritance

Applying the new theme

Basic theme customizations

Theme variables Changing the main color Changing the font size Changing a button's color

Custom component UIs

Defining UIs Applying UIs

Other UIs Summary

9. Visualizing Your Application's Data

Anatomy of chart components

Series Axes Labels Interactions

Creating a line chart

Creating the store and model Polling the server for new data

Presenting data in a bar chart Creating a pie chart in Ext JS Integrating visualizations in grids Summary

10. Guaranteeing Your Code's Quality with Unit and UI Testing

Writing testable JavaScript

Single responsibility Accessible code Nested callbacks Separate event handlers from actions

Testing frameworks

Jasmine Siesta

Writing unit tests

Testing project structure Creating the test harness Adding the first test Executing tests Extending tests

Testing UI interaction

Testing cell contents

Setting up expected data Checking cell contents

Simulating clicks Event recorder

Test automation and integration

Test reports

Summary

Index

← Prev
Back
Next →

← Prev
Back
Next →