PacktLib: Ext JS 4 Web Application Development Cookbook

Ext JS 4 Web Application Development Cookbook


About the Authors

About the Reviewers


Classes, Object-Oriented Principles and Structuring your Application


Creating custom classes using the new Ext JS class system

Using inheritance in your classes

Adding mixins to your class

Scoping your functions

Dynamically loading Ext JS classes

Aliasing your components

Accessing components with component query

Extending Ext JS components

Overriding Ext JS' functionality

Manipulating the Dom, Handling Events, and Making AJAX Requests


Selecting DOM elements

Traversing the DOM

Manipulating DOM elements

Creating new DOM elements

Handling events on elements and components

Delegating event handling of child elements

Simple animation of elements

Custom animations

Parsing, formatting, and manipulating dates

Loading data with AJAX

Encoding and decoding JSON data

Laying Out Your Components


Using a FitLayout to expand components to fill their parent

Creating flexible vertical layouts with VBoxes

Creating flexible horizontal layouts with HBoxes

Displaying content in columns

Collapsible layouts with accordions

Displaying stacked components with CardLayouts

Anchor components to their parent's dimensions

Creating fullscreen applications with the BorderLayout

Combining multiple layouts

UI Building Blocks—Trees, Panels, and Data Views


Loading a tree's nodes from the server

Sorting tree nodes

Dragging-and-dropping nodes within a tree

Using a tree as a menu to load content into another panel

Docking items to panels' edges

Displaying a simple form in a window

Creating a tabbed layout with tooltips

Manipulating a tab panel's TabBar

Executing inline JavaScript to in an XTemplate customize appearance

Creating Ext.XTemplate member functions

Adding logic to Ext.XTemplates

Formatting dates within an Ext.XTemplate

Creating a DataView bound to a data store

Displaying a detailed window after clicking a DataView node

Loading, Submitting, and Validating Forms


Constructing a complex form layout

Populating your form with data

Submitting your form's data

Validating form fields with VTypes

Creating custom VTypes

Uploading files to the server

Handling exception and callbacks

Using and Configuring Form Fields


Displaying radio buttons in columns

Populating CheckboxGroups

Dynamically generate a CheckboxGroup from JSON

Setting up available date ranges in Date fields

Loading and parsing Dates into a Date field

Entering numbers with a Spinner field

Sliding values using a Slider field

Loading server side data into a combobox

Autocompleting a combobox's value

Rendering the results in a combobox

Rich editing with an HTML field

Creating repeatable form fields and fieldsets

Combining form fields

Working with the Ext JS Data Package


Modeling a data object

Loading and saving a Model using proxies

Loading cross-domain data with a Store

Associating Models and loading nested data

Applying validation rules to Models' fields

Grouping a Store's data

Handling Store exceptions

Saving and loading data with HTML5 Local Storage

Displaying and Editing Tabular Data


Displaying simple tabular data

Editing grid data with a RowEditor

Adding a paging toolbar for large datasets

Dealing with large datasets with an infinite scrolling grid

Dragging-and-dropping records between grids

Creating a grouped grid

Custom rendering of grid cells with TemplateColumns

Creating summary rows aggregating the grid's data

Displaying full-width row data with the RowBody feature

Adding a context menu to grid rows

Populating a form from a selected grid row

Adding buttons to grid rows with action columns

Constructing Toolbars with Buttons and Menus


Creating a split button

Working with context menus

Adding a combobox to a toolbar to filter a grid

Using the color picker in a menu

Drawing and Charting


Drawing basic shapes

Applying gradients to shapes

Drawing paths

Transforming and interacting with shapes

Creating a bar chart with external data

Creating a pie chart with local data

Creating a line chart with updating data

Customizing labels, colors, and axes

Attaching events to chart components

Creating a live updating chart bound to an editable grid

Theming your Application


Compiling SASS with Compass

Introduction to SASS

Using Ext JS' SASS variables

Using the UI config option

Creating your own theme mixins

Restyling a panel

Creating images for legacy browsers

Advanced Ext JS for the Perfect App


Advanced functionality with plugins

Architecting your applications with the MVC pattern

Attaching user interactions to controller actions

Creating a real-life application with the MVC pattern

Building your application with Sencha's SDK tools

Getting started with Ext Direct

Loading and submitting forms with Ext Direct

Handling errors throughout your application