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

About the Reviewers

Aafrin Fareeth is a self-made programmer who fell in love with codes during his high school. Since then he has mastered several languages, such as C++, Java, PHP, ASP, VB, VB.net, and is on a quest to master more languages. He specializes in web application development, security testing, and forensic analysis.

Yiyu Jia has been developing web applications since 1996. He worked as a technical leader and solutions architect on various projects with Java and PHP as the major backend languages. He also has professional experience in interactive TV middleware and home gateway projects. He is especially interested in designing multi-channel web applications.

Yiyu Jia is also the main founder of the novel data-mining research topic—Promotional Subspace Mining (PSM), which aims at finding out useful information from subspaces in very large data sets. He can be reached at the given e-mail address—<[email protected]>. His blog and website are http://yiyujia.blogspot.com and http://www.idatamining.org respectively.

Peter Kellner, a Microsoft ASP.NET MVP since 2007, is founder and president of ConnectionRoad, and a seasoned software professional specializing in high quality, scalable, and extensible web applications. His experience includes building and leading engineering teams both on and off shore. Peter is actively engaged in the software community being the primary leader of Silicon Valley Code Camp, which attracted over 2,000 people in 2011 with over 200 sessions. He also organizes the San Francisco Sencha Users Group. In his free time he and his wife Tammy can be found biking the Santa Cruz Mountains. In 2003 they rode across the United States in 27 days.

Joel Watson is a web enthusiast, working for the past eight years in website design and development. He loves exploring web technologies of all sorts, and particularly enjoys creating web experiences that leverage the newest features of HTML5 and its related technologies.

When he’s not coding, Joel enjoys spending time with his wife and two daughters, playing guitar, and watching cheesy sci-fi and anime.

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

About the Reviewers