Overview of Ext JS 3

Published Jul 30, 2008 | The Sencha Dev Team | Guide | Easy
Last Updated Jul 11, 2011

This Guide is most relevant to Ext JS, 3.x.

Welcome to Ext JS 3. The 3.0 to 3.2 releases introduce many new improvements and additions to your favorite JavaScript framework. The following document provides a great overview all of the major changes in the Ext JS 3 series releases. For additional information and more in-depth 3 series documentation please visit these helpful resources:

Ext JS 3.0

New Components

ListView

New ListView component displays tabular data similar to the GridPanel with a lighter-weight footprint. Designed for casual data table displays that don't require the more elaborate features available in GridPanel.

  • Display Grid Style Data with a Lighter Footprint
  • Simple Single and Multi-Row Selection Capabilities
  • Columns can use Percentage Based Widths and Templates
  • Built-in Column Resizing and Sorting Capabilities
  • Excludes Editing, Horizontal Scaling & Other Advanced GridPanel Features

Charts

New flash based charting components provide integrated data visualization tools with the familiarity of Ext style configuration objects.

DataWriter

Delivers powerful new data management capabilities to automate create, update, and destroy data operations between an Ext.data.Store and your server-side application. Using the available subclasses Ext.data.JsonWriter and Ext.data.XmlWriter you can quickly automate Ajax requests that mirror CRUD operations happening on your local Ext.data.Store to your server side application.

ButtonGroup

New specialized container designed to make advanced button layouts and working with groups of buttons more convenient. View the ButtonGroup API documentation for additional details.

Enhanced Components

Buttons

The Button component has been updated with better support for visual customization and layout management.

  • Updated Markup Structure Scales to Support Greater Range of Custom Widths & Heights
  • New Scale Config Option Offers Shorthand Syntax for Common Buttons Sizes
  • Updated to Participate in BoxComponent Supported Layouts (Button now Extends BoxComponent)

Component.mon

Short for managed on. Allows you to add managed event listeners that Ext.Component will automatically maintain responsibility for removing upon destruction. Useful for adding event listeners to objects that will no longer be available when the component is destroyed (such as underlying HTML elements making up the component). Using component.mon saves you the extra step of writing code to manually remove these listeners when the component is destroyed.

Toolbar Overflow

Updated Toolbar component now smoothly handles overflowing toolbar items. Upon an overflow condition a menu is automatically generated to provide access to overflowed items. Overflowed menu items remain bound to their existing toolbar handler functions.

Menu Overflow

Updated Menu component provides better support for menus containing more items than the viewable screen real estate. Overflowing menus automatically display UI arrows providing scrollable access to all available menu items. This new feature can be toggled via the enableScrolling config option.

Tooltip Anchoring

New Tooltip configuration options (anchor, anchorOffset and anchorToTarget) allow tooltips to be anchored to elements with greater precision.

GridView Buffering

Updated GridView class features enhanced performance for larger data sets. It now buffers data intelligently for the rows currently in view.

  • Increased Performance by only Rendering Rows as they Become Visible
  • Out of View DOM Markup is Automatically Purged to Minimize DOM Size

Debug Console

New updates to the Debug console add additional functionality and tools to help inspect running Ext JS applications.

  • New Component Inspector Displays a Tree View of Components with Links to Object Inspector
  • New Data Store View Displays a List of Store Objects Along with a Record Count and Links to Object Inspector
  • Updated Object Inspector Displays a List of all Object Properties with a Filter for Displaying/Hiding Functions

Keyboard Navigation

Improved Ext.KeyNav class makes it easier to add keyboard navigation shortcuts to your applications.

  • Global Keyboard Navigation Support
  • Keyboard Navigation Focus can be Received by Every Container
  • Added Support for Toolbar & Button Components

Ext.Direct

Ext.direct is a JavaScript remoting architecture and specification that allows you to mirror server side methods on the client-side. This makes it possible to call server-side methods from your Ext JS applications as if they were local client-side methods. Ext.direct provides both a package of client-side classes to support this architecture along with specifications for integrating remoting capabilities with all major server side application development platforms.

For more information about how you can use Ext.direct check out the introductory blog post. When you're ready to start working with Ext.direct visit the architecture walk-through.

  • Client-side RPC Style provider Architecture
  • Server-Side Specifications and Ready-To-Use Server-Side Implementations to Choose From
  • Flexible Server Side Configuration Options Include JSON, XML, Programmatic and Metadata Driven

Browsers, Themes & Layouts

Ext JS 3 features improved browser support and new browser specific properties.

Improved Browser Support

  • Fixed Several Browser Issues for Improved Capability with Latest Chrome/Safari Releases
  • New isWebKit and ext-webkit CSS Properties
  • New IE8 Support, New Properties isIE8 and ext-ie8
  • New Option to use Native JSON Exists (for browsers that support it)

Improved CSS Theming

Updated CSS architecture separates structural and visual CSS styles for easier custom theming.

  • Separated Structual and Visual CSS Styles
  • Easier to Create your own Themes by Overriding Visual Styles Independently
  • Reduced File Sizes When Using Custom Themes

New HBox & VBox Layouts

HBox and VBox are two new versatile layouts for aligning container items horizontally and vertically.

  • Arrange Items in a Container Horizontally or Vertically
  • Support for Controlling Alignment and Packing Options
  • Control how Available Container Space is Divided using the Flex Config Option

New Panel Config Option preventBodyReset

Ext.Panel has a new configuration option preventBodyReset which adds an extra css class 'x-panel-normal' to the panel's element, effectively applying css styles suggested by the W3C to the Panel's body element (not the header, footer, etc.). It's useful when inserting HTML content into a panel that needs to take advantage of standard W3C HTML styles. This new config option is available for Ext.Panel and its subclasses.

New User Extensions

GroupTabs

New GroupTabs user extension provides an alternative way to group tabs in vertical tab interfaces.

RowEditor

New RowEditor user extension adds full row-level editing capabilities to complement the existing cell-level editing features available to GridPanels.

Upgrade Notes

Upgrading from Ext 2 to 3 will be seamless for most applications. Pay close attention to any user extensions that override or alter private methods and properties. You might also need to update existing Ext.menu.Menu and Ext.Toolbar components as there have been significant changes to both classes.

Renamed Classes

  • Ext.data.SimpleStore -> Ext.data.ArrayStore
  • Ext.layout.Accordion -> Ext.layout.AccordionLayout

Deprecated Classes

  • Ext.menu.Adapter
  • Ext.menu.ColorItem
  • Ext.menu.DateItem
  • Ext.data.SimpleStore
  • Ext.StatusBar

Structural Markup Changes

Markup for most components hasn't changed from Ext JS 2 with the exception of the markup used for the Button component.
Share this post:
Leave a reply

Written by The Sencha Dev Team

Commenting is not available in this channel entry.

Community

Related Posts

Any ideas?

If you have any ideas to improve this article, please let us know