Ext JS 4 Web Application Development Cookbook

Whether you’re a newcomer or well versed in Ext JS, this cookbook will increase your skills and enable you to create interactive, cross-platform web applications using Sencha’s latest JavaScript framework. Packed with recipes and examples.

Ext JS 4 Web Application Development Cookbook

Cookbook
Andrew Duncan, Stuart Ashworth

Whether you’re a newcomer or well versed in Ext JS, this cookbook will increase your skills and enable you to create interactive, cross-platform web applications using Sencha’s latest JavaScript framework. Packed with recipes and examples.
$34.99
$49.99
RRP $34.99
RRP $49.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849516860
Paperback488 pages

About This Book

  • Learn how to build Rich Internet Applications with the latest version of the Ext JS framework in a cookbook style
  • From creating forms to theming your interface, you will learn the building blocks for developing the perfect web application
  • Easy to follow recipes step through practical and detailed examples which are all fully backed up with code, illustrations, and tips

Who This Book Is For

The Ext JS 4 Web Application Development Cookbook is aimed at both newcomers and those experienced with Ext JS who want to expand their knowledge and learn how to create interactive web applications with Ext JS 4.

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: 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

What You Will Learn

  • Structure your application according to best practices, manipulate the DOM, and handle events raised by users and the framework
  • Learn the layouts available in Ext JS and understand how to combine these to make complex layouts
  • Create aesthetic and user-friendly forms, validate these on the client, and submit data to your server
  • Present and organize data with Trees, Tabbed layouts, Data Views, and Templates
  • Make AJAX requests, model data objects, incorporate Ext.Direct, perform CRUD operations on data, and integrate HTML5 local storage with Ext JS
  • Work with Grids to present and manipulate tabular data by editing rows, dragging and dropping records, scrolling infinitely, and grouping data
  • Represent data visually with flexible and interactive Charts and Drawing components
  • Customize the look and feel of your application with SASS and Compass

 

In Detail

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.

Authors

Table of Contents

Chapter 1: 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
Chapter 2: 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
Chapter 3: 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
Chapter 4: 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
Chapter 5: 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
Chapter 6: 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
Chapter 7: 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
Chapter 8: 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
Chapter 9: 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
Chapter 10: 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
Chapter 11: 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
Chapter 12: 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

Book Details

ISBN 139781849516860
Paperback488 pages
Read More