user experience matters

Examples



For Gxt Scheduler examples, click here!

Ext Gantt Examples

Basic Gantt Chart

This example is a very basic implementation of the Ext Gantt, loading XML data.

Advanced Gantt Chart

This example shows a more advanced implementation of the Ext Gantt, you can setup inter-task dependencies easily by using drag and drop.

Theming and Styles (new!)

Learn how easy it is to change the appearance of the Gantt chart using only CSS.

Paging Gantt Chart

This example is a simple demonstration of how you can use paging to work with large datasets.

Ext Scheduler: Basic examples

Validation (new!)

This is example shows you how you can validate your schedule while interacting with it.

Understanding events

This is example logs the events fired by the scheduler and its data stores (loading both XML and JSON data).

Column positioning (new!)

This example shows you how you can position your "static" columns in your schedule.

Grouping example

This is a feature packed demo showcasing grouping and 3 different row height options.

Scrolling programmatically (new!)

This example shows how you can scroll to a point in time, or to a specific event in your data store.

Configuration options (new!)

This example shows you a variety of different configuration options for the timescale. Each column can represent hours, days, weeks, months or years.

Locking and grouping view

This example shows a view that is both using grouping and the locking feature.

Printing your schedule (new!)

Simple example showing how you can print your scheduled data.

Ext Scheduler: Customization examples

Localization (new!)

This example shows you how easy it is to localize date formats and texts used in the Scheduler.

Custom header (new!)

This example shows you how to create your own custom header.

Custom event styles

This example visualizes the loading time for different HTML resources during a page load.

Custom Time Axis (new!)

This example uses a custom time axis representing a work week with separate start/end times for the weekdays.

Customizing Row Height (new!)

This example shows you how you can customize row height and event bar height.

Customizing Time Resolution (new!)

This example shows you how you can customize the time resolution used by the scheduler.

Ext Scheduler: Plugins

Lines and zones (updated)

Plugin demonstration for the Zones and Lines plugins. You can add custom zones and lines to indicate special events or time spans such as vacation time or milestones.

Timegap plugin (new!)

This example shows a TimeGap plugin, highlighting periods of time that are available for all resources in the chart.

Column summary plugin

This example shows you how the new ColumnSummary plugin works. For each resource, a number indicating either the total time or percentage allocated in the current view.

Editing event data (updated!)

You can associate any meta data you want with a scheduled event. This example shows you the EventEditor plugin used to edit the data associated with the events in the scheduler (double click to show the editor).

Pan plugin (new!)

Plugin allowing you to pan the schedule by clicking and dragging.

Drag selector plugin (new!)

Plugin allowing you select multiple events at once by clicking and dragging.

Ext Scheduler: Advanced examples

HTML5 Showcase

This is an example using HTML5 and CSS3 features to create a cabin booking application.

Dynamic Presets (new!)

This is an advanced example showing how you can allow your end users to generate their own custom views of their data.

Multiple rows per resource

Here's an example showing how you can show multiple "rows" for a single resource. It is all done using CSS, and it's very simple to do.

Drag drop from a grid (updated!)

Drag drop from an external grid onto the scheduler. Also includes a basic way of handling resource availability.

Experimental: Client side Export to Excel

This example is a proof of concept showing export functionality leveraging the data URI scheme. The example has only been tested in Firefox.

Speech recognition

This example is a proof of concept of scheduling using voice recognition. You can schedule tasks easily using your own voice.

Ext Scheduler: Charting examples

Charting

Chart example that observes the data store of the scheduler and refreshes automatically.

Charting with Raphael

Simple chart example using Raphael.

Complete Server Implementation Examples

ASP.NET MVC

This example integrates the scheduler with ASP.NET MVC (v2), using LINQ and Ext.data.JsonWriter.

Ext Gantt + ASP.NET Web Forms

Sample implementation combining Ext Gantt with classic ASP.NET, using LINQ and Ext.data.JsonWriter.

Ext Scheduler + VB.NET

Sample implementation combining Ext Scheduler with classic VB.NET, using LINQ and Ext.data.JsonWriter.

Ext Scheduler: Mashups with remote data sources

This example loads data from public Google Calendars.
This is a simple example that connects to the Yahoo Upcoming event service.
This is an example showing ongoing auctions from the eBay API.
This example visualizes the program schedule for different online radio stations.
This example shows a timeline of all the Ext JS user groups registered with meetup.com.
This example visualizes a simple schedule stored in an online Google Spreadsheet.