Ext JS 4 Web Application Development Cookbook

Ext JS 4 Web Application Development Cookbook

By : Andrew Duncan, Stuart Ashworth

Buy this Book

Ext JS 4 Web Application Development Cookbook

By: Andrew Duncan, Stuart Ashworth

Buy this Book

Overview of this book

Ext JS 4 is Sencha’s latest JavaScript framework for developing cross-platform web applications. Built upon web standards, Ext JS provides a comprehensive library of user interface widgets and data manipulation classes to turbo-charge your application’s development. Ext JS 4 builds on Ext JS 3, introducing a number of new widgets and features including the popular MVC architecture, easily customisable themes and plugin-free charting. Ext JS 4 Web Application Development Cookbook works through the framework from the fundamentals to advanced features and application design. More than 130 detailed and practical recipes demonstrate all of the key widgets and features the framework has to offer. With this book, and the Ext JS framework, learn how to develop truly interactive and responsive web applications. Starting with the framework fundamentals, you will work through all of the widgets and features the framework has to offer, finishing with extensive coverage of application design and code structure. Over 110 practical and detailed recipes describe how to create and work with forms, grids, data views, and charts. You will also learn about the best practices for structuring and designing your application and how to deal with storing and manipulating data. The cookbook structure is such that you may read the recipes in any order. The Ext JS 4 Web Application Development Cookbook will provide you with the knowledge to create interactive and responsive web applications, using real life examples.

Ext JS 4 Web Application Development Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Classes, Object-Oriented Principles and Structuring your Application

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Displaying stacked components with CardLayouts

Ext JS gives us the ability to stack components on top of one another allowing us to only show a single item at once and have the option to switch between them as we wish. There are several possible use cases for this type of layout, for example, a wizard style form, a content carousel, or a tabbed layout.

The Ext.tab.TabPanel component is in fact based on the card layout and uses it to manage the tabs' layout.

In this recipe, we will demonstrate how to use the Ext.layout.container.Card layout manager to create a simple account creation wizard as shown in the following screenshot:

How to do it...

We start by creating our wrapping Ext.panel.Panel which will contain each of our cards:

var panel = Ext.create('Ext.panel.Panel', {
    title: 'Account Creation Wizard - Card Layout',
    width: 350,
    height: 300,
    renderTo: Ext.getBody()
});

We now create our three cards that will form each screen of our wizard. The first contains three form fields...

Ext JS 4 Web Application Development Cookbook

By : Andrew Duncan, Stuart Ashworth

Ext JS 4 Web Application Development Cookbook

By: Andrew Duncan, Stuart Ashworth

Overview of this book

Related Content you might be interested in

Current Title:

Ext JS 4 Web Application Development Cookbook

Displaying stacked components with CardLayouts

How to do it...