Book Image

Ext JS 4 Web Application Development Cookbook

By : Andrew Duncan, Stuart Ashworth
Book Image

Ext JS 4 Web Application Development Cookbook

By: Andrew Duncan, Stuart Ashworth

Overview of this book

<p>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. <br /><br /><em>Ext JS 4 Web Application Development Cookbook</em> 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.<br /><br />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.<br /><br />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.<br /><br />The <em>Ext JS 4 Web Application Development Cookbook</em> will provide you with the knowledge to create interactive and responsive web applications, using real life examples.</p>

Related Content you might be interested in

Current Title:

Small book image
Ext JS 4 Web Application Development Cookbook
Andrew Duncan | Stuart Ashworth
Aug, 2012 | 488 pages
No titles found
Table of Contents (19 chapters)
Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook
Credits
Credits
About the Authors
About the Authors
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Classes, Object-Oriented Principles and Structuring your Application
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
2
Manipulating the Dom, Handling Events, and Making AJAX Requests
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
3
Laying Out Your Components
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
4
UI Building Blocks—Trees, Panels, and Data Views
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
5
Loading, Submitting, and Validating Forms
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
6
Using and Configuring Form Fields
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
7
Working with the Ext JS Data Package
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
8
Displaying and Editing Tabular Data
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
9
Constructing Toolbars with Buttons and Menus
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
10
Drawing and Charting
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
11
Theming your Application
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
12
Advanced Ext JS for the Perfect App
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
Index

Docking items to panels' edges

This recipe demonstrates how to dock items to the edges of a panel. We will show this by adding a toolbar to a panel's edges.

How to do it...

  1. Create a panel and render it to the document's body:

    Ext.create('Ext.panel.Panel', {
    title: 'Panel Header',
    width: 500,
    height: 200,
    bodyPadding: 10,
    html: 'Panel Content',
    renderTo: Ext.getBody(),
    style: 'margin: 50px'
});

  2. Dock a toolbar to the top of the panel:

    Ext.create('Ext.panel.Panel', {
    title: 'Panel Header',
    width: 500,
    height: 200,
    bodyPadding: 10,
    html: 'Panel Content',
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            xtype: 'button',
            text: 'Click me'
        }, '->', 'Docked toolbar at the top']
    }],
    renderTo: Ext.getBody(),
    style: 'margin: 50px'
});

    Tip

    When creating a toolbar, any component configuration added to the items array without an xtype will default to being a button.

  3. Add another item...

Previous Section
End of Section 7
Next Section