Ext JS 3.2 - extjs.com
Initializing...

Ext

Ext JS 3.2 Samples


Combination Examples

Feed Viewer

RSS feed reader example application that features a swappable reader panel layout.

Web Desktop

Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.

Ext JS API Documentation (Updated)

API Documentation application.

Ext JS Forum Browser

Ext JS online forums browser application.

Image Viewer

DataView and TreePanel example that demonstrates dragging data items from a DataView into a TreePanel.

Offline Support

Simple Tasks

Personal task management application example that uses Google Gears for data storage.

Simple Tasks

Complete personal task management application example that runs on Adobe AIR.

Accessibility

Key Feed Viewer (Experimental)

Keyboard navigation within a complex layout.

ARIA Tree (Experimental)

Demonstrating ARIA with a TreePanel

Custom Search Fields

A TriggerField search extension combined with an XTemplate for custom results rendering. Uses the Accessibility theme.

Binding a Grid to a Form

A grid embedded within a FormPanel that uses the Accessibility theme.

Grids

Basic Array Grid

A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.

Property Grid

An example of a traditional property grid as typically seen in development IDEs.

Editable Grid

An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.

Row Editor Grid (New)

An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package.

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.

Progress Bar Pager (New)

An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.

Sliding Pager (New)

A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.

Grouping

A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.

Grouping with Dynamic Summary (New)

Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.

Grouping with Remote Summary

Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.

Grid Plugins

Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.

Grid Filtering (Updated)

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.

Buffered GridView (New)

GridView optimized for performance by rendering only visible rows.

Editable Grid with Writable Store (New)

This Store uses JsonWriter to automatically generate CRUD requests to the server through a standard HttpProxy.

RESTful Store with GridPanel and RowEditor (New)

A RESTful Store with JsonWriter which automatically generates CRUD requests to the server.

Locking GridView extension (New)

An example extension that introduces the ability to add locking columns to the GridPanel

Grouping GridView extension (New)

An extension that adds the capability of grouping Column headers in the GridPanel

Multiple Sorting (New)

An example that shows multi-level sorting in a Grid Panel.

Tabs

Basic Tabs

Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.

TabPanel Scroller Menu (New)

An example of an overflow menu that appears to the right of the TabPanel tab strip

Advanced Tabs

Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.

Group Tabs (New)

A custom example on how to setup tab grouping using vertical tabs.

Charts

Charts (New)

A sampling of several chart styles

Pie Chart (New)

An example of a pie chart

Stacked Bar Chart (New)

An example of a stacked bar chart

Reloaded Chart (New)

An example demonstrating chart data reloading

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.

TreeGrid (New)

The TreeGrid component

Check Tree (New)

An example showing simple checkbox selection in a tree.

XML Tree Loader

A custom TreeLoader implementation that demonstrates loading a tree from an XML document.

Layout Managers

Layout Browser (Updated)

Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples.

Border Layout

A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.

Accordion Layout

A basic accordion layout within a border layout.

Absolute Layout (Form)

A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.

Anchor Layout (Form)

A simple example of form fields utilizing an anchor layout in a window for flexible form resizing.

Anchor Layout (Panel)

An example of Panels anchored in the browser window.

Column Layout

An example of Panels managed by a column layout.

Table Layout

An example of Panels managed by a table layout.

HBox Layout (New)

Interactive layout illustrating the capabilities of the HBox Layout.

VBox Layout (New)

Interactive layout illustrating the capabilities of the VBox Layout.

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 Fields

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.

Spinner Field

An example of a custom spinner widget.

MultiSelect and ItemSelector

Example controls for selecting a list of items in forms.

Slider Field (New)

Example usage of an Ext.Slider to select a number value in a form.

Forms with vBox layout (New)

Example usage of the vBox layout with forms. An added bonus is the FieldReplicator plugin.

Composite Fields (New)

Example usage of the Composite Fields to place several fields on a single form row.

Toolbars and Menus

Basic Toolbar (Updated)

Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.

Toolbar Overflow (New)

Dynamic overflow of toolbar buttons into an Ext.menu.

Toolbar Button Groups (New)

Group buttons together in the toolbar.

Ext Actions

Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.

Reorderable Toolbar (New)

Items within a toolbar can be reordered using this plugin.

Droppable Toolbar (New)

Items can be dropped onto a Toolbar and easily turned into items with this plugin.

Status Bar (Updated)

A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.

Status Bar (Advanced) (Updated)

Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.

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.

ListView (New)

A high performance tabular DataView to be used as a lightweight grid.

Animated DataView (New)

Transition animation plugin applied to a standard DataView

Multi-sort DataView (New)

Example demonstrating the ability to sort a DataView by multiple sorters.

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.

Field to Grid Drag and Drop (New)

Drag from a form field and drop on a grid.

Custom Drag and Drop

Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.

Direct

Direct (New)

An example demonstrating Remoting and Polling the server

Direct Form (New)

Ext.Direct Remoting with a Form

Direct TreeLoader (New)

Ext.Direct Remoting with a Tree

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.

Editor (New)

An example demonstrating the ease of use of the Ext.editor class to modify DOM elements

Slider (Updated)

A slider component that supports vertical mode, snapping, tooltips, customized styles and multiple thumbs.

QuickTips (Updated)

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 (Updated)

A basic collapsible panel example.

Bubble Panel (New)

An example illustrating customization of a standard panel.

Resizable

Examples of making any element resizable with various configuration options.

Spotlight (New)

A utility for masking everything except a single element on the page to visually highlight it.

Buttons (New)

Debugging Console (New)

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.

© 2006-2009 Ext, LLC