This Guide is most relevant to Ext JS, 3.x.
- Ext JS 3.2.1 API Reference
- Ext JS 3 Examples
- Ext JS 3.2 Change Log
- Ext JS 3.1 Change Log
- Ext JS 3.0 Change Log
- Sencha Community Forums
Ext JS 3.0
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
New flash based charting components provide integrated data visualization tools with the familiarity of Ext style configuration objects.
- Chart Types Include: Bar, cartesian, Column, Line, Pie and More
- Display Data Directly from Ext.data.store Objects
- Visual Customization Using Familiar Config Style Syntax
- Pass Objects and Vars Directly to the Underlying Flash Object for Advanced Control
- Full Event Lifecycle Inherited From Ext.Component and new Ext.FlashComponent Object
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.
- Available Data Writers for JSON & XML (Ext.data.JsonWriter / Ext.data.XmlWriter)
- Full CRUD (Create, Read, Update, Destroy) Operations Support
- Integrates Directly with Ext.data.store Objects Alongside Data Readers
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.
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)
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.
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.
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.
New Tooltip configuration options (anchor, anchorOffset and anchorToTarget) allow tooltips to be anchored to elements with greater precision.
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
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
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
- 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
- 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
New GroupTabs user extension provides an alternative way to group tabs in vertical tab interfaces.
New RowEditor user extension adds full row-level editing capabilities to complement the existing cell-level editing features available to GridPanels.
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.
- Ext.data.SimpleStore -> Ext.data.ArrayStore
- Ext.layout.Accordion -> Ext.layout.AccordionLayout