Ext JS 4 First Look

Description

Ext JS 4 is a JavaScript framework that provides resources to build Rich Internet Applications with great performance. Ext JS 4 has been packed with many new features and it is difficult to master, even for seasoned experts in Ext JS 3.

Ext JS 4 First Look teaches you the main functional areas of Ext JS 4 that have significant new features, explains the new features and how to use them, while highlighting the differences between Ext JS 4 and the previous versions.

This book will give you the knowledge to make the required changes to Ext JS 3 application to build a complete Ext JS 4 application.

This book provides examples of how to load Ext JS components by demand, charts, grid, tree, forms and panels, new data model, themes and mvc architecture.

Ext JS 4 First Look provides full examples and illustrations to help you easily learn the new features of Ext JS 4.

CONTENTS:

Table of Contents

Preface

Chapter 1: What's New in Ext JS 4?

Chapter 2: The New Data Package

Chapter 3: Upgraded Layouts

Chapter 4: Upgraded Charts

Chapter 5: Upgraded Grid, Tree, and Form

Chapter 6: Ext JS 4 Themes

Chapter 7: MVC Application Architecture

Appendix A: Ext JS 4 Versus Ext JS 3 Class Names

Index

Preface

 

Chapter 1: What's New in Ext JS 4?

Getting started with Ext JS 4

Package and namespace updates

Upgraded documentation

Ext JS 4 SDK quick look

What is the difference between ext.js and ext-all.js?

Deploying Ext JS locally

The new Ext JS 4 class system

Class definition and creation

Creating a new class

Extending a class

Mixins

Config (auto setters and getters)

Dynamic class loading

Statics

Migrating from Ext JS 3 to Ext JS 4

Adapters

JavaScript compatibility file

Sandbox mode

Sencha platform

Data package

Draw package and charts

Layouts

Grids

Forms

Accessibility

Theming

Summary

 

Chapter 2: The New Data Package

Broad overview

The new model class

Declaring fields

Validating the model

Loading/saving data with proxies and stores

Linking models through associations

Proxies

Client proxies

LocalStorageProxy

SessionStorageProxy

MemoryProxy

Server proxies

AjaxProxy

Rest proxy

JsonP proxy

Stores

Readers

Writers

JsonWriter

XmlWriter

Sorting

Filtering

Summary

Chapter 3: Upgraded Layouts

Ext JS 4 layouts

Container layouts

Auto layout

Anchor layout

Absolute layout

HBox layout

VBox layout

Accordion layout

Table layout

Column layout

Fit layout

Card layout

Border layout

Component layouts

Dock layout

Tool layout

Field layout

TriggerField layout

Summary

Chapter 4: Upgraded Charts

Ext JS 4 chart upgrades

Ext draw package

Applying transformations to a draw

Putting it all together

Ext chart package

Legend

Axis

Category, Numeric, and Time axes

Gauge axis

Radial axis

Series

Bar chart

Grouped bar chart

Stacked bar chart

Column chart

Line Chart

Customizing a Line Chart

Grouped Line Chart

Area Chart

Grouped Area Chart

Scatter Chart

Grouped Scatter Chart

Pie Chart

Donut Chart

Radar Chart

Grouped Radar Chart

Gauge Chart

Customizing a Chart

Summary

Chapter 5: Upgraded Grid, Tree, and Form

Grid panel

Columns

Feature support

Ext.grid.feature.Grouping

Ext.grid.feature.GroupingSummary

Ext.grid.feature.Summary

Ext.grid.feature.RowBody

Grid plugins

Ext.grid.plugin.CellEditing

Ext.grid.plugin.RowEditing

Saving the data to the server

Infinite scrolling

Tree panel

Drag-and-drop and sorting

Check tree

Tree grid

Form

Form fields

Validation

Form label

Actions

Summary

Chapter 6: Ext JS 4 Themes

Getting started with Ext JS 4 themes

Installing Ruby

Windows and Mac OS

Linux

Ubuntu and Debian

Red Hat Enterprise and Fedora

Installing Sass and Compass

Setting up an Ext project

Creating a new theme

Variables

Bugs in earlier versions of Ext JS 4.1

Creating new Ext JS Component UIs

Complete my-ext-theme.scss file

Supporting legacy browsers

Missing custom images

Summary

Chapter 7: MVC Application Architecture

The new MVC application architecture

Creating a sample application the old-fashioned way

Migrating/creating an app using the MVC architecture

Project directory structure

Ext.ComponentQuery

Ext.container.Container functions: query, child, down, and up

Query function

Child function

Down function competency

Up function

Creating the MVC application

Creating the book-mvc application

Creating the controller class

Controlling a view in the controller class

Creating the model and store classes

Adding the book details panel

Controller getter methods

Useful tips to develop an MVC application

Nested models and MVC

Building your application for production

Summary

Appendix A: Ext JS 4 Versus Ext JS 3 Class Names

Index