Ext JS 2.2 Samples
Combination Samples
Feed Viewer 2.0
RSS 2.0 feed reader sample application that features a swappable reader panel layout.
Simple Tasks 2.0
Complete personal task management application sample that runs on Adobe AIR.
Simple Tasks
Personal task management application sample that uses Google Gears for data storage.
Image Organizer
DataView and TreePanel sample that demonstrates dragging data items from a DataView into a TreePanel.
Web Desktop
Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.
Grids
Basic Array Grid
A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.
Editable Grid
An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.
XML Grid
A simple read-only grid loaded from XML data.
Paging
A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.
Grouping
A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.
Live Group Summary
Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.
Grid Plugins
Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.
Grid Filtering
Grid plugins providing custom data filtering menus that support various data types.
Grid From Markup
Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.
Grid Data Binding (basic)
Data binding a grid to a detail preview panel via the grid's RowSelectionModel.
Grid Data Binding (advanced)
Refactoring the basic data binding example to use a class-based application design model.
Tabs
Basic Tabs
Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.
Advanced Tabs
Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.
Windows
Hello World
Simple "Hello World" window that contains a basic TabPanel.
MessageBox
Different styles include confirm, alert, prompt, progress and wait and also support custom icons.
Layout Window
A window containing a basic BorderLayout with nested TabPanel.
Trees
Drag and Drop Reordering
A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.
Multiple trees
Drag and drop between two different sorted TreePanels.
Column Tree
A custom TreePanel implementation that demonstrates extending an existing component.
XML Tree Loader
A custom TreeLoader implementation that demonstrates loading a tree from an XML document.
Layout Managers
Layout Browser
Includes examples for each standard Ext layout, several custom layouts and combination examples.
Border Layout
A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.
Anchor Layout
A simple example of anchoring form fields to a window for flexible form resizing.
Portal Demo
A page layout using several custom extensions to provide a web portal interface.
ComboBox
Basic ComboBox
Basic combos, combos rendered from markup and customized list layout to provide item tooltips.
ComboBox Templates
Customized combo with template-based list rendering, remote loading and paging.
Forms
Dynamic Forms
Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.
Ajax with XML Forms
Ajax-loaded form fields from remote XML data and remote field validation on submit.
Custom Search Field
A TriggerField search extension combined with an XTemplate for custom results rendering.
Binding a Grid to a Form
A grid embedded within a FormPanel that automatically loads records into the form on row selection.
Advanced Validation
Relational form field validation using custom vtypes.
Checkbox/Radio Groups
Many examples showing different checkbox and radio group configurations.
File Upload Field
A demo of how to give standard file upload fields a bit of Ext style using a custom class.
MultiSelect and ItemSelector
Example controls for selecting a list of items in forms.
Toolbars and Menus
Basic Toolbar
Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.
Ext Actions
Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.
Templates and DataView
Templates
A simple example of rendering views from templates bound to data objects.
DataView
A basic DataView with custom plugins for editable labels and drag selection of items.
DataView (advanced)
A more customized DataView supporting sorting and filtering with multiple templates.
Drag and Drop
Grid to Grid Drag and Drop
A simple drag and drop from grid to grid implementation.
Grid to FormPanel Drag and Drop
A basic drag and drop from grid to formpanel.
Custom Drag and Drop
Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.
Miscellaneous
History
A History manager that allows the user to navigate an Ext UI via browser back/forward.
Google Maps
A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.
StatusBar
A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.
StatusBar (advanced)
Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.
Slider
A slider component that supports vertical mode, snapping, tooltips, customized styles and more.
QuickTips
Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.
Progress Bar
A basic progress bar component shown in various configurations and with custom styles.
Panels
A basic collapsible panel example.
Resizable
Examples of making any element resizable with various configuration options.
Spotlight
A utility for masking everything except a single element on the page to visually highlight it.
Localization (static)
Demonstrates fully localizing a form by including a custom locale script.
Localization (dynamic)
Dynamically render various Ext components in different locales by selecting from a locale list.