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

Using a FitLayout to expand components to fill their parent

The FitLayout makes it possible for you to expand a component to fill its parent container. The FitLayout is easy to use and requires no configuration. The screenshot shows how a FitLayout can be used to automatically expand a panel to take up its parent's entire area:

How to do it...

Start by creating a simple Ext.panel.Panel and render it to the document's body. This panel will be the parent item that contains our inner, expanded-to-fit component:
```
Ext.create('Ext.panel.Panel', {
    title: 'Fit Layout',
    width: 500,
    height: 200,
    renderTo: Ext.getBody()
});
```

Now, add the inner panel by adding it to the parent's items collection:

Ext.create('Ext.panel.Panel', {
    title: 'Fit Layout',
    width: 500,
    height: 200,
    items: {
        title: 'Inner Panel',
        html: 'Panel content',
        bodyPadding: 10,
        border: true
    },
    renderTo: Ext.getBody()
});

Finally, apply the fit layout to the parent panel to...

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

Using a FitLayout to expand components to fill their parent

How to do it...