Upgrade to ExtJS 3.2.0 - Released 03/30/2010
[extjs.git] / examples / data.js
index 0cf9cda..1f2200a 100644 (file)
 /*!
- * Ext JS Library 3.1.1
- * Copyright(c) 2006-2010 Ext JS, LLC
+ * Ext JS Library 3.2.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
  * licensing@extjs.com
  * http://www.extjs.com/license
  */
-Ext.ns('Ext.samples');\r
-\r
-\r
-Ext.samples.samplesCatalog = [{\r
-    title: 'Combination Examples',\r
-    samples: [{\r
-        text: 'Feed Viewer',\r
-        url:  'feed-viewer/view.html',\r
-        icon: 'feeds.gif',\r
-        desc: 'RSS feed reader example application that features a swappable reader panel layout.'\r
-    },{\r
-        text: 'Web Desktop',\r
-        url:  'desktop/desktop.html',\r
-        icon: 'desktop.gif',\r
-        desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.'\r
-    }/*,{\r
-        text: 'Image Organizer',\r
-        url:  'image-organizer/index.html',\r
-        icon: 'image-organizer.gif',\r
-        desc: 'Image management application example utilizing MySQL lite and Ext.Direct.',\r
-        status: 'new'\r
-    }*/,{\r
-        text: 'Ext JS API Documentation',\r
-        url:  '../docs/index.html',\r
-        icon: 'docs.gif',\r
-        desc: 'API Documentation application.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Ext JS Forum Browser',\r
-        url:  'forum/forum.html',\r
-        icon: 'forum.gif',\r
-        desc: 'Ext JS online forums browser application.',\r
-        status: 'modified'\r
-    },{\r
-        text: 'Image Viewer',\r
-        url:  'organizer/organizer.html',\r
-        icon: 'organizer.gif',\r
-        desc: 'DataView and TreePanel example that demonstrates dragging data items from a DataView into a TreePanel.'\r
-    }]\r
-},{\r
-    title: 'Offline Support',\r
-    samples: [{\r
-        text: 'Simple Tasks',\r
-        url:  'tasks/tasks.html',\r
-        icon: 'tasks.gif',\r
-        desc: 'Personal task management application example that uses <a href="http://gears.google.com" target="_blank">Google Gears</a> for data storage.'\r
-    },{\r
-        text: 'Simple Tasks',\r
-        url:  'http://extjs.com/blog/2008/02/24/tasks2/',\r
-        icon: 'air.gif',\r
-        desc: 'Complete personal task management application example that runs on <a href="http://labs.adobe.com/technologies/air/" target="_blank">Adobe AIR</a>.'\r
-    }]\r
-},{\r
-    title: 'Accessibility',\r
-    samples: [{\r
-        text: 'Key Feed Viewer',\r
-        url:  'key-feed-viewer/view.html',\r
-        icon: 'keyboard.gif',\r
-        desc: 'Keyboard navigation within a complex layout.',\r
-        status: 'experimental'\r
-    },{\r
-        text: 'ARIA Tree',\r
-        url:  'tree/aria-tree.html',\r
-        icon: 'acc-tree.gif',\r
-        desc: 'Demonstrating ARIA with a TreePanel',\r
-        status: 'experimental'\r
-    },{\r
-        text: 'Custom Search Fields',\r
-        url: 'form/custom-access.html',\r
-        icon: 'form-custom-access.gif',\r
-        desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering. Uses the Accessibility theme.'\r
-    },{\r
-        text: 'Binding a Grid to a Form',\r
-        url:  'form/form-grid-access.html',\r
-        icon: 'form-grid-binding-access.gif',\r
-        desc: 'A grid embedded within a FormPanel that uses the Accessibility theme.'\r
-\r
-    }]\r
-},{\r
-    title: 'Grids',\r
-    samples: [{\r
-        text: 'Basic Array Grid',\r
-        url:  'grid/array-grid.html',\r
-        icon: 'grid-array.gif',\r
-        desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'\r
-    },{\r
-        text: 'Property Grid',\r
-        url:  'grid/property-grid.html',\r
-        icon: 'grid-property.gif',\r
-        desc: 'An example of a traditional property grid as typically seen in development IDEs.'\r
-    },{\r
-        text: 'Editable Grid',\r
-        url:  'grid/edit-grid.html',\r
-        icon: 'grid-edit.gif',\r
-        desc: 'An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.'\r
-    },{\r
-        text: 'Row Editor Grid',\r
-        url:  'grid/row-editor.html',\r
-        icon: 'grid-row-editor.gif',\r
-        desc: 'An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',\r
-        status: 'new'\r
-    },{\r
-        text: 'XML Grid',\r
-        url:  'grid/xml-grid.html',\r
-        icon: 'grid-xml.gif',\r
-        desc: 'A simple read-only grid loaded from XML data.'\r
-    },{\r
-        text: 'Paging',\r
-        url:  'grid/paging.html',\r
-        icon: 'grid-paging.gif',\r
-        desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'\r
-    },{\r
-        text: 'Progress Bar Pager',\r
-        url:  'grid/progress-bar-pager.html',\r
-        icon: 'progress-bar-pager.gif',\r
-        desc: 'An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Sliding Pager',\r
-        url: 'grid/sliding-pager.html',\r
-        icon: 'slider-pager.gif',\r
-        desc: 'A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Grouping',\r
-        url: 'grid/grouping.html',\r
-        icon: 'grid-grouping.gif',\r
-        desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'\r
-    },{\r
-        text: 'Grouping with Dynamic Summary',\r
-        url: 'grid/totals.html',\r
-        icon: 'grid-summary.gif',\r
-        desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Grouping with Remote Summary',\r
-        url: 'grid/totals-hybrid.html',\r
-        icon: 'grid-summary.gif',\r
-        desc: 'Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.'\r
-    },{\r
-        text: 'Grid Plugins',\r
-        url: 'grid/grid-plugins.html',\r
-        icon: 'grid-plugins.gif',\r
-        desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'\r
-    },{\r
-        text: 'Grid Filtering',\r
-        url: 'grid-filtering/grid-filter-local.html',\r
-        icon: 'grid-filter.gif',\r
-        desc: 'Grid plugins providing custom data filtering menus that support various data types.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Grid From Markup',\r
-        url: 'grid/from-markup.html',\r
-        icon: 'grid-from-markup.gif',\r
-        desc: 'Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.'\r
-    },{\r
-        text: 'Grid Data Binding (basic)',\r
-        url: 'grid/binding.html',\r
-        icon: 'grid-data-binding.gif',\r
-        desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'\r
-    },{\r
-        text: 'Grid Data Binding (advanced)',\r
-        url: 'grid/binding-with-classes.html',\r
-        icon: 'grid-data-binding.gif',\r
-        desc: 'Refactoring the basic data binding example to use a class-based application design model.'\r
-    },{\r
-        text: 'Buffered GridView',\r
-        url: 'grid/buffer.html',\r
-        icon: 'grid-buffer.gif',\r
-        desc: 'GridView optimized for performance by rendering only visible rows.',\r
-        status: 'new'\r
-    }, {\r
-        text: 'Editable Grid with Writable Store',\r
-        url: 'writer/writer.html',\r
-        icon: 'writer-thumb.gif',\r
-        desc: 'This Store uses JsonWriter to automatically generate CRUD requests to the server through a standard HttpProxy.',\r
-        status: 'new'\r
-    }, {\r
-        text: 'RESTful Store with GridPanel and RowEditor',\r
-        url: 'restful/restful.html',\r
-        icon: 'grid-row-editor.gif',\r
-        desc: 'A RESTful Store with JsonWriter which automatically generates CRUD requests to the server.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Locking GridView extension',\r
-        url: 'grid/locking-grid.html',\r
-        icon: 'grid-locking.gif',\r
-        desc: 'An example extension that introduces the ability to add locking columns to the GridPanel',\r
-        status: 'new'\r
-    },{\r
-        text: 'Grouping GridView extension',\r
-        url: 'grid/ColumnHeaderGroup.html',\r
-        icon: 'grid-columngrouping.gif',\r
-        desc: 'An extension that adds the capability of grouping Column headers in the GridPanel',\r
-        status: 'new'\r
-    }]\r
-},{\r
-    title: 'Tabs',\r
-    samples: [{\r
-        text: 'Basic Tabs',\r
-        url: 'tabs/tabs.html',\r
-        icon: 'tabs.gif',\r
-        desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'\r
-    },{\r
-        text: 'TabPanel Scroller Menu',\r
-        url: 'tabs/tab-scroller-menu.html',\r
-        icon: 'tab-panel-scroller-menu.gif',\r
-        desc: 'An example of an overflow menu that appears to the right of the TabPanel tab strip',\r
-        status: 'new'\r
-    },{\r
-        text: 'Advanced Tabs',\r
-        url: 'tabs/tabs-adv.html',\r
-        icon: 'tabs-adv.gif',\r
-        desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'\r
-    },{\r
-        text: 'Group Tabs',\r
-        url: 'grouptabs/grouptabs.html',\r
-        icon: 'group-tabs.gif',\r
-        desc: 'A custom example on how to setup tab grouping using vertical tabs.',\r
-        status: 'new'\r
-    }]\r
-},{\r
-    title: 'Charts',\r
-    samples: [{\r
-        text: 'Charts',\r
-        url: 'chart/charts.html',\r
-        icon: 'charts.gif',\r
-        desc: 'A sampling of several chart styles',\r
-        status: 'new'\r
-    },{\r
-        text: 'Pie Chart',\r
-        url: 'chart/pie-chart.html',\r
-        icon: 'chart-pie.gif',\r
-        desc: 'An example of a pie chart',\r
-        status: 'new'\r
-    },{\r
-        text: 'Stacked Bar Chart',\r
-        url: 'chart/stacked-bar-chart.html',\r
-        icon: 'chart-stacked.gif',\r
-        desc: 'An example of a stacked bar chart',\r
-        status: 'new'\r
-    },{\r
-        text: 'Reloaded Chart',\r
-        url: 'chart/reload-chart.html',\r
-        icon: 'chart-reload.gif',\r
-        desc: 'An example demonstrating chart data reloading',\r
-        status: 'new'\r
-    }]\r
-},{\r
-    title: 'Windows',\r
-    samples: [{\r
-        text: 'Hello World',\r
-        url: 'window/hello.html',\r
-        icon: 'window.gif',\r
-        desc: 'Simple "Hello World" window that contains a basic TabPanel.'\r
-    },{\r
-        text: 'MessageBox',\r
-        url: 'message-box/msg-box.html',\r
-        icon: 'msg-box.gif',\r
-        desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'\r
-    },{\r
-        text: 'Layout Window',\r
-        url: 'window/layout.html',\r
-        icon: 'window-layout.gif',\r
-        desc: 'A window containing a basic BorderLayout with nested TabPanel.'\r
-    }]\r
-},{\r
-    title: 'Trees',\r
-    samples: [{\r
-        text: 'Drag and Drop Reordering',\r
-        url: 'tree/reorder.html',\r
-        icon: 'tree-reorder.gif',\r
-        desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'\r
-    },{\r
-        text: 'Multiple trees',\r
-        url: 'tree/two-trees.html',\r
-        icon: 'tree-two.gif',\r
-        desc: 'Drag and drop between two different sorted TreePanels.'\r
-    },{\r
-        text: 'TreeGrid',\r
-        url: 'treegrid/treegrid.html',\r
-        icon: 'tree-columns.gif',\r
-        desc: 'The TreeGrid component',\r
-        status: 'new'\r
-    },{\r
-        text: 'Check Tree',\r
-        url: 'tree/check-tree.html',\r
-        icon: 'tree-check.gif',\r
-        desc: 'An example showing simple checkbox selection in a tree.',\r
-        status: 'new'\r
-    },{\r
-        text: 'XML Tree Loader',\r
-        url: 'tree/xml-tree-loader.html',\r
-        icon: 'tree-xml-loader.gif',\r
-        desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'\r
-    }]\r
-},{\r
-    title: 'Layout Managers',\r
-    samples: [{\r
-        text: 'Layout Browser',\r
-        url:  'layout-browser/layout-browser.html',\r
-        icon: 'layout-browser.gif',\r
-        desc: 'Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Border Layout',\r
-        url:  'layout/complex.html',\r
-        icon: 'border-layout.gif',\r
-        desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'\r
-    },{\r
-        text: 'Accordion Layout',\r
-        url:  'layout/accordion.html',\r
-        icon: 'layout-accordion.gif',\r
-        desc: 'A basic accordion layout within a border layout.'\r
-    },{\r
-        text: 'Absolute Layout (Form)',\r
-        url:  'form/absform.html',\r
-        icon: 'layout-absolute.gif',\r
-        desc: 'A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.'\r
-    },{\r
-        text: 'Anchor Layout (Form)',\r
-        url:  'form/anchoring.html',\r
-        icon: 'layout-form.gif',\r
-        desc: 'A simple example of form fields utilizing an anchor layout in a window for flexible form resizing.'\r
-    },{\r
-        text: 'Anchor Layout (Panel)',\r
-        url:  'layout/anchor.html',\r
-        icon: 'layout-anchor.gif',\r
-        desc: 'An example of Panels anchored in the browser window.'\r
-    },{\r
-        text: 'Column Layout',\r
-        url:  'layout/column.html',\r
-        icon: 'layout-column.gif',\r
-        desc: 'An example of Panels managed by a column layout.'\r
-    },{\r
-        text: 'Table Layout',\r
-        url:  'layout/table.html',\r
-        icon: 'layout-table.gif',\r
-        desc: 'An example of Panels managed by a table layout.'\r
-    },{\r
-        text: 'HBox Layout',\r
-        url:  'layout/hbox.html',\r
-        icon: 'layout-column.gif',\r
-        desc: 'Interactive layout illustrating the capabilities of the HBox Layout.',\r
-        status: 'new'\r
-    },{\r
-        text: 'VBox Layout',\r
-        url:  'layout/vbox.html',\r
-        icon: 'layout-vbox.gif',\r
-        desc: 'Interactive layout illustrating the capabilities of the VBox Layout.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Portal Demo',\r
-        url:  'portal/portal.html',\r
-        icon: 'portal.gif',\r
-        desc: 'A page layout using several custom extensions to provide a web portal interface.'\r
-    }]\r
-},{\r
-    title: 'ComboBox',\r
-    samples: [{\r
-        text: 'Basic ComboBox',\r
-        url: 'form/combos.html',\r
-        icon: 'combo.gif',\r
-        desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'\r
-    },{\r
-        text: 'ComboBox Templates',\r
-        url: 'form/forum-search.html',\r
-        icon: 'combo-custom.gif',\r
-        desc: 'Customized combo with template-based list rendering, remote loading and paging.'\r
-    }]\r
-},{\r
-    title: 'Forms',\r
-    samples: [{\r
-        text: 'Dynamic Forms',\r
-        url: 'form/dynamic.html',\r
-        icon: 'form-dynamic.gif',\r
-        desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'\r
-    },{\r
-        text: 'Ajax with XML Forms',\r
-        url: 'form/xml-form.html',\r
-        icon: 'form-xml.gif',\r
-        desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'\r
-    },{\r
-        text: 'Custom Search Fields',\r
-        url: 'form/custom.html',\r
-        icon: 'form-custom.gif',\r
-        desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'\r
-    },{\r
-        text: 'Binding a Grid to a Form',\r
-        url:  'form/form-grid.html',\r
-        icon: 'form-grid-binding.gif',\r
-        desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'\r
-    },{\r
-        text: 'Advanced Validation',\r
-        url:  'form/adv-vtypes.html',\r
-        icon: 'form-adv-vtypes.gif',\r
-        desc: 'Relational form field validation using custom vtypes.'\r
-    },{\r
-        text: 'Checkbox/Radio Groups',\r
-        url:  'form/check-radio.html',\r
-        icon: 'form-check-radio.gif',\r
-        desc: 'Many examples showing different checkbox and radio group configurations.'\r
-    },{\r
-        text: 'File Upload Field',\r
-        url:  'form/file-upload.html',\r
-        icon: 'form-file-upload.gif',\r
-        desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'\r
-    },{\r
-        text: 'Spinner Field',\r
-        url:  'spinner/spinner.html',\r
-        icon: 'form-spinner.gif',\r
-        desc: 'An example of a custom spinner widget.',\r
-        status: 'new'\r
-    },{\r
-        text: 'MultiSelect and ItemSelector',\r
-        url:  'multiselect/multiselect-demo.html',\r
-        icon: 'form-multiselect.gif',\r
-        desc: 'Example controls for selecting a list of items in forms.'\r
-    },{\r
-        text: 'Forms with vBox layout',\r
-        url:  'form/vbox-form.html',\r
-        icon: 'form-vbox.gif',\r
-        desc: 'Example usage of the vBox layout with forms. An added bonus is the FieldReplicator plugin.',\r
-       status : 'new'\r
-    }]\r
-},{\r
-    title: 'Toolbars and Menus',\r
-    samples: [{\r
-        text: 'Basic Toolbar',\r
-        url:  'menu/menus.html',\r
-        icon: 'toolbar.gif',\r
-        desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Toolbar Overflow',\r
-        url:  'toolbar/overflow.html',\r
-        icon: 'toolbar-overflow.gif',\r
-        desc: 'Dynamic overflow of toolbar buttons into an Ext.menu.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Toolbar Button Groups',\r
-        url:  'toolbar/toolbars.html',\r
-        icon: 'toolbar-button-groups.gif',\r
-        desc: 'Group buttons together in the toolbar.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Ext Actions',\r
-        url:  'menu/actions.html',\r
-        icon: 'toolbar-actions.gif',\r
-        desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'\r
-    },{\r
-        text: 'Status Bar',\r
-        url:  'statusbar/statusbar-demo.html',\r
-        icon: 'statusbar-demo.gif',\r
-        desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Status Bar (Advanced)',\r
-        url:  'statusbar/statusbar-advanced.html',\r
-        icon: 'statusbar-adv.gif',\r
-        desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.',\r
-        status: 'updated'\r
-    }]\r
-},{\r
-    title: 'Templates and DataView',\r
-    samples: [{\r
-        text: 'Templates',\r
-        url: 'core/templates.html',\r
-        icon: 'templates.gif',\r
-        desc: 'A simple example of rendering views from templates bound to data objects.'\r
-    },{\r
-        text: 'DataView',\r
-        url: 'view/data-view.html',\r
-        icon: 'data-view.gif',\r
-        desc: 'A basic DataView with custom plugins for editable labels and drag selection of items.'\r
-    },{\r
-        text: 'DataView (advanced)',\r
-        url: 'view/chooser.html',\r
-        icon: 'chooser.gif',\r
-        desc: 'A more customized DataView supporting sorting and filtering with multiple templates.'\r
-    },{\r
-        text: 'ListView',\r
-        url: 'view/list-view.html',\r
-        icon: 'list-view.gif',\r
-        desc: 'A high performance tabular DataView to be used as a lightweight grid.',\r
-        status: 'new'\r
-    }]\r
-},{\r
-    title   : 'Drag and Drop',\r
-    samples :  [{\r
-        text : 'Grid to Grid Drag and Drop',\r
-        url  : 'dd/dnd_grid_to_grid.html',\r
-        icon : 'dd-gridtogrid.gif',\r
-        desc : 'A simple drag and drop from grid to grid implementation.'\r
-    },{\r
-        text : 'Grid to FormPanel Drag and Drop',\r
-        url  : 'dd/dnd_grid_to_formpanel.html',\r
-        icon : 'dd-gridtoformpanel.gif',\r
-        desc : 'A basic drag and drop from grid to formpanel.'\r
-    },{\r
-        text : 'Field to Grid Drag and Drop',\r
-        url  : 'dd/field-to-grid-dd.html',\r
-        icon : 'dd-fieldtogrid.gif',\r
-        desc : 'Drag from a form field and drop on a grid.',\r
-        status: 'new'\r
-    },{\r
-        text : 'Custom Drag and Drop',\r
-        url  : 'dd/dragdropzones.html',\r
-        icon : 'dd-zones.gif',\r
-        desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'\r
-    }]\r
-},{\r
-    title: 'Direct',\r
-    samples: [{\r
-        text: 'Direct',\r
-        url:  'direct/direct.php',\r
-        icon: 'direct.gif',\r
-        desc: 'An example demonstrating Remoting and Polling the server',\r
-        status: 'new'\r
-    },{\r
-        text: 'Direct Form',\r
-        url:  'direct/direct-form.php',\r
-        icon: 'direct.gif',\r
-        desc: 'Ext.Direct Remoting with a Form',\r
-        status: 'new'\r
-    },{\r
-        text: 'Direct TreeLoader',\r
-        url:  'direct/direct-tree.php',\r
-        icon: 'direct.gif',\r
-        desc: 'Ext.Direct Remoting with a Tree',\r
-        status: 'new'\r
-    }]\r
-},{\r
-    title: 'Miscellaneous',\r
-    samples: [{\r
-        text: 'History',\r
-        url: 'history/history.html',\r
-        icon: 'history.gif',\r
-        desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'\r
-    },{\r
-        text: 'Google Maps',\r
-        url: 'window/gmap.html',\r
-        icon: 'gmap-panel.gif',\r
-        desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'\r
-    },{\r
-        text: 'Editor',\r
-        url: 'simple-widgets/editor.html',\r
-        icon: 'editor.gif',\r
-        desc: 'An example demonstrating the ease of use of the Ext.editor class to modify DOM elements',\r
-        status: 'new'\r
-    },{\r
-        text: 'Slider',\r
-        url: 'slider/slider.html',\r
-        icon: 'slider.gif',\r
-        desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and more.'\r
-    },{\r
-        text: 'QuickTips',\r
-        url: 'simple-widgets/qtips.html',\r
-        icon: 'qtips.gif',\r
-        desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Progress Bar',\r
-        url: 'simple-widgets/progress-bar.html',\r
-        icon: 'progress.gif',\r
-        desc: 'A basic progress bar component shown in various configurations and with custom styles.'\r
-    },{\r
-        text: 'Panels',\r
-        url: 'panel/panels.html',\r
-        icon: 'panel.gif',\r
-        desc: 'A basic collapsible panel example.',\r
-        status: 'updated'\r
-    },{\r
-        text: 'Bubble Panel',\r
-        url: 'panel/bubble-panel.html',\r
-        icon: 'panel-bubble.gif',\r
-        desc: 'An example illustrating customization of a standard panel.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Resizable',\r
-        url: 'resizable/basic.html',\r
-        icon: 'resizable.gif',\r
-        desc: 'Examples of making any element resizable with various configuration options.'\r
-    },{\r
-        text: 'Spotlight',\r
-        url: 'core/spotlight.html',\r
-        icon: 'spotlight.gif',\r
-        desc: 'A utility for masking everything except a single element on the page to visually highlight it.',\r
-        status: 'new'\r
-    },{\r
-        text: 'Buttons',\r
-        url: 'button/buttons.html',\r
-        icon: 'buttons.gif',\r
-        desc: '',\r
-        status: 'new'\r
-    },{\r
-        text: 'Debugging Console',\r
-        url: 'debug/debug-console.html',\r
-        icon: 'debug-console.gif',\r
-        desc: '',\r
-        status: 'new'\r
-    },{\r
-        text: 'Localization (static)',\r
-        url: 'locale/dutch-form.html',\r
-        icon: 'locale-dutch.gif',\r
-        desc: 'Demonstrates fully localizing a form by including a custom locale script.'\r
-    },{\r
-        text: 'Localization (dynamic)',\r
-        url: 'locale/multi-lang.html',\r
-        icon: 'locale-switch.gif',\r
-        desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'\r
-    }]\r
-}];\r
+Ext.ns('Ext.samples');
+
+
+Ext.samples.samplesCatalog = [{
+    title: 'Combination Examples',
+    samples: [{
+        text: 'Feed Viewer',
+        url:  'feed-viewer/view.html',
+        icon: 'feeds.gif',
+        desc: 'RSS feed reader example application that features a swappable reader panel layout.'
+    },{
+        text: 'Web Desktop',
+        url:  'desktop/desktop.html',
+        icon: 'desktop.gif',
+        desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.'
+    }/*,{
+        text: 'Image Organizer',
+        url:  'image-organizer/index.html',
+        icon: 'image-organizer.gif',
+        desc: 'Image management application example utilizing MySQL lite and Ext.Direct.',
+        status: 'new'
+    }*/,{
+        text: 'Ext JS API Documentation',
+        url:  '../docs/index.html',
+        icon: 'docs.gif',
+        desc: 'API Documentation application.',
+        status: 'updated'
+    },{
+        text: 'Ext JS Forum Browser',
+        url:  'forum/forum.html',
+        icon: 'forum.gif',
+        desc: 'Ext JS online forums browser application.',
+        status: 'modified'
+    },{
+        text: 'Image Viewer',
+        url:  'organizer/organizer.html',
+        icon: 'organizer.gif',
+        desc: 'DataView and TreePanel example that demonstrates dragging data items from a DataView into a TreePanel.'
+    },{
+        text: 'Themes Viewer',
+        url:  'themes/index.html',
+        icon: 'themes.gif',
+        desc: 'View and test every Ext component against bundled Ext themes, or, your own custom themes.',
+        status: 'new'
+    }]
+},{
+    title: 'Offline Support',
+    samples: [{
+        text: 'Simple Tasks',
+        url:  'tasks/tasks.html',
+        icon: 'tasks.gif',
+        desc: 'Personal task management application example that uses <a href="http://gears.google.com" target="_blank">Google Gears</a> for data storage.'
+    },{
+        text: 'Simple Tasks',
+        url:  'http://extjs.com/blog/2008/02/24/tasks2/',
+        icon: 'air.gif',
+        desc: 'Complete personal task management application example that runs on <a href="http://labs.adobe.com/technologies/air/" target="_blank">Adobe AIR</a>.'
+    }]
+},{
+    title: 'Accessibility',
+    samples: [{
+        text: 'Key Feed Viewer',
+        url:  'key-feed-viewer/view.html',
+        icon: 'keyboard.gif',
+        desc: 'Keyboard navigation within a complex layout.',
+        status: 'experimental'
+    },{
+        text: 'ARIA Tree',
+        url:  'tree/aria-tree.html',
+        icon: 'acc-tree.gif',
+        desc: 'Demonstrating ARIA with a TreePanel',
+        status: 'experimental'
+    },{
+        text: 'Custom Search Fields',
+        url: 'form/custom-access.html',
+        icon: 'form-custom-access.gif',
+        desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering. Uses the Accessibility theme.'
+    },{
+        text: 'Binding a Grid to a Form',
+        url:  'form/form-grid-access.html',
+        icon: 'form-grid-binding-access.gif',
+        desc: 'A grid embedded within a FormPanel that uses the Accessibility theme.'
+
+    }]
+},{
+    title: 'Grids',
+    samples: [{
+        text: 'Basic Array Grid',
+        url:  'grid/array-grid.html',
+        icon: 'grid-array.gif',
+        desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'
+    },{
+        text: 'Property Grid',
+        url:  'grid/property-grid.html',
+        icon: 'grid-property.gif',
+        desc: 'An example of a traditional property grid as typically seen in development IDEs.'
+    },{
+        text: 'Editable Grid',
+        url:  'grid/edit-grid.html',
+        icon: 'grid-edit.gif',
+        desc: 'An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.'
+    },{
+        text: 'Row Editor Grid',
+        url:  'grid/row-editor.html',
+        icon: 'grid-row-editor.gif',
+        desc: 'An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',
+        status: 'new'
+    },{
+        text: 'XML Grid',
+        url:  'grid/xml-grid.html',
+        icon: 'grid-xml.gif',
+        desc: 'A simple read-only grid loaded from XML data.'
+    },{
+        text: 'Paging',
+        url:  'grid/paging.html',
+        icon: 'grid-paging.gif',
+        desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
+    },{
+        text: 'Progress Bar Pager',
+        url:  'grid/progress-bar-pager.html',
+        icon: 'progress-bar-pager.gif',
+        desc: 'An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',
+        status: 'new'
+    },{
+        text: 'Sliding Pager',
+        url: 'grid/sliding-pager.html',
+        icon: 'slider-pager.gif',
+        desc: 'A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',
+        status: 'new'
+    },{
+        text: 'Grouping',
+        url: 'grid/grouping.html',
+        icon: 'grid-grouping.gif',
+        desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
+    },{
+        text: 'Grouping with Dynamic Summary',
+        url: 'grid/totals.html',
+        icon: 'grid-summary.gif',
+        desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.',
+        status: 'new'
+    },{
+        text: 'Grouping with Remote Summary',
+        url: 'grid/totals-hybrid.html',
+        icon: 'grid-summary.gif',
+        desc: 'Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.'
+    },{
+        text: 'Grid Plugins',
+        url: 'grid/grid-plugins.html',
+        icon: 'grid-plugins.gif',
+        desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'
+    },{
+        text: 'Grid Filtering',
+        url: 'grid-filtering/grid-filter-local.html',
+        icon: 'grid-filter.gif',
+        desc: 'Grid plugins providing custom data filtering menus that support various data types.',
+        status: 'updated'
+    },{
+        text: 'Grid From Markup',
+        url: 'grid/from-markup.html',
+        icon: 'grid-from-markup.gif',
+        desc: 'Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.'
+    },{
+        text: 'Grid Data Binding (basic)',
+        url: 'grid/binding.html',
+        icon: 'grid-data-binding.gif',
+        desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'
+    },{
+        text: 'Grid Data Binding (advanced)',
+        url: 'grid/binding-with-classes.html',
+        icon: 'grid-data-binding.gif',
+        desc: 'Refactoring the basic data binding example to use a class-based application design model.'
+    },{
+        text: 'Buffered GridView',
+        url: 'grid/buffer.html',
+        icon: 'grid-buffer.gif',
+        desc: 'GridView optimized for performance by rendering only visible rows.',
+        status: 'new'
+    }, {
+        text: 'Editable Grid with Writable Store',
+        url: 'writer/writer.html',
+        icon: 'writer-thumb.gif',
+        desc: 'This Store uses JsonWriter to automatically generate CRUD requests to the server through a standard HttpProxy.',
+        status: 'new'
+    }, {
+        text: 'RESTful Store with GridPanel and RowEditor',
+        url: 'restful/restful.html',
+        icon: 'grid-row-editor.gif',
+        desc: 'A RESTful Store with JsonWriter which automatically generates CRUD requests to the server.',
+        status: 'new'
+    },{
+        text: 'Locking GridView extension',
+        url: 'grid/locking-grid.html',
+        icon: 'grid-locking.gif',
+        desc: 'An example extension that introduces the ability to add locking columns to the GridPanel',
+        status: 'new'
+    },{
+        text: 'Grouping GridView extension',
+        url: 'grid/ColumnHeaderGroup.html',
+        icon: 'grid-columngrouping.gif',
+        desc: 'An extension that adds the capability of grouping Column headers in the GridPanel',
+        status: 'new'
+    },
+    {
+        text: 'Multiple Sorting',
+        url: 'grid/multiple-sorting.html',
+        icon: 'grid-multiple-sorting.png',
+        desc: 'An example that shows multi-level sorting in a Grid Panel.',
+        status: 'new'
+    }]
+},{
+    title: 'Tabs',
+    samples: [{
+        text: 'Basic Tabs',
+        url: 'tabs/tabs.html',
+        icon: 'tabs.gif',
+        desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'
+    },{
+        text: 'TabPanel Scroller Menu',
+        url: 'tabs/tab-scroller-menu.html',
+        icon: 'tab-panel-scroller-menu.gif',
+        desc: 'An example of an overflow menu that appears to the right of the TabPanel tab strip',
+        status: 'new'
+    },{
+        text: 'Advanced Tabs',
+        url: 'tabs/tabs-adv.html',
+        icon: 'tabs-adv.gif',
+        desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'
+    },{
+        text: 'Group Tabs',
+        url: 'grouptabs/grouptabs.html',
+        icon: 'group-tabs.gif',
+        desc: 'A custom example on how to setup tab grouping using vertical tabs.',
+        status: 'new'
+    }]
+},{
+    title: 'Charts',
+    samples: [{
+        text: 'Charts',
+        url: 'chart/charts.html',
+        icon: 'charts.gif',
+        desc: 'A sampling of several chart styles',
+        status: 'new'
+    },{
+        text: 'Pie Chart',
+        url: 'chart/pie-chart.html',
+        icon: 'chart-pie.gif',
+        desc: 'An example of a pie chart',
+        status: 'new'
+    },{
+        text: 'Stacked Bar Chart',
+        url: 'chart/stacked-bar-chart.html',
+        icon: 'chart-stacked.gif',
+        desc: 'An example of a stacked bar chart',
+        status: 'new'
+    },{
+        text: 'Reloaded Chart',
+        url: 'chart/reload-chart.html',
+        icon: 'chart-reload.gif',
+        desc: 'An example demonstrating chart data reloading',
+        status: 'new'
+    }]
+},{
+    title: 'Windows',
+    samples: [{
+        text: 'Hello World',
+        url: 'window/hello.html',
+        icon: 'window.gif',
+        desc: 'Simple "Hello World" window that contains a basic TabPanel.'
+    },{
+        text: 'MessageBox',
+        url: 'message-box/msg-box.html',
+        icon: 'msg-box.gif',
+        desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'
+    },{
+        text: 'Layout Window',
+        url: 'window/layout.html',
+        icon: 'window-layout.gif',
+        desc: 'A window containing a basic BorderLayout with nested TabPanel.'
+    }]
+},{
+    title: 'Trees',
+    samples: [{
+        text: 'Drag and Drop Reordering',
+        url: 'tree/reorder.html',
+        icon: 'tree-reorder.gif',
+        desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'
+    },{
+        text: 'Multiple trees',
+        url: 'tree/two-trees.html',
+        icon: 'tree-two.gif',
+        desc: 'Drag and drop between two different sorted TreePanels.'
+    },{
+        text: 'TreeGrid',
+        url: 'treegrid/treegrid.html',
+        icon: 'tree-columns.gif',
+        desc: 'The TreeGrid component',
+        status: 'new'
+    },{
+        text: 'Check Tree',
+        url: 'tree/check-tree.html',
+        icon: 'tree-check.gif',
+        desc: 'An example showing simple checkbox selection in a tree.',
+        status: 'new'
+    },{
+        text: 'XML Tree Loader',
+        url: 'tree/xml-tree-loader.html',
+        icon: 'tree-xml-loader.gif',
+        desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'
+    }]
+},{
+    title: 'Layout Managers',
+    samples: [{
+        text: 'Layout Browser',
+        url:  'layout-browser/layout-browser.html',
+        icon: 'layout-browser.gif',
+        desc: 'Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples.',
+        status: 'updated'
+    },{
+        text: 'Border Layout',
+        url:  'layout/complex.html',
+        icon: 'border-layout.gif',
+        desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'
+    },{
+        text: 'Accordion Layout',
+        url:  'layout/accordion.html',
+        icon: 'layout-accordion.gif',
+        desc: 'A basic accordion layout within a border layout.'
+    },{
+        text: 'Absolute Layout (Form)',
+        url:  'form/absform.html',
+        icon: 'layout-absolute.gif',
+        desc: 'A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.'
+    },{
+        text: 'Anchor Layout (Form)',
+        url:  'form/anchoring.html',
+        icon: 'layout-form.gif',
+        desc: 'A simple example of form fields utilizing an anchor layout in a window for flexible form resizing.'
+    },{
+        text: 'Anchor Layout (Panel)',
+        url:  'layout/anchor.html',
+        icon: 'layout-anchor.gif',
+        desc: 'An example of Panels anchored in the browser window.'
+    },{
+        text: 'Column Layout',
+        url:  'layout/column.html',
+        icon: 'layout-column.gif',
+        desc: 'An example of Panels managed by a column layout.'
+    },{
+        text: 'Table Layout',
+        url:  'layout/table.html',
+        icon: 'layout-table.gif',
+        desc: 'An example of Panels managed by a table layout.'
+    },{
+        text: 'HBox Layout',
+        url:  'layout/hbox.html',
+        icon: 'layout-column.gif',
+        desc: 'Interactive layout illustrating the capabilities of the HBox Layout.',
+        status: 'new'
+    },{
+        text: 'VBox Layout',
+        url:  'layout/vbox.html',
+        icon: 'layout-vbox.gif',
+        desc: 'Interactive layout illustrating the capabilities of the VBox Layout.',
+        status: 'new'
+    },{
+        text: 'Portal Demo',
+        url:  'portal/portal.html',
+        icon: 'portal.gif',
+        desc: 'A page layout using several custom extensions to provide a web portal interface.'
+    }]
+},{
+    title: 'ComboBox',
+    samples: [{
+        text: 'Basic ComboBox',
+        url: 'form/combos.html',
+        icon: 'combo.gif',
+        desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'
+    },{
+        text: 'ComboBox Templates',
+        url: 'form/forum-search.html',
+        icon: 'combo-custom.gif',
+        desc: 'Customized combo with template-based list rendering, remote loading and paging.'
+    }]
+},{
+    title: 'Forms',
+    samples: [{
+        text: 'Dynamic Forms',
+        url: 'form/dynamic.html',
+        icon: 'form-dynamic.gif',
+        desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'
+    },{
+        text: 'Ajax with XML Forms',
+        url: 'form/xml-form.html',
+        icon: 'form-xml.gif',
+        desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'
+    },{
+        text: 'Custom Search Fields',
+        url: 'form/custom.html',
+        icon: 'form-custom.gif',
+        desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'
+    },{
+        text: 'Binding a Grid to a Form',
+        url:  'form/form-grid.html',
+        icon: 'form-grid-binding.gif',
+        desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'
+    },{
+        text: 'Advanced Validation',
+        url:  'form/adv-vtypes.html',
+        icon: 'form-adv-vtypes.gif',
+        desc: 'Relational form field validation using custom vtypes.'
+    },{
+        text: 'Checkbox/Radio Groups',
+        url:  'form/check-radio.html',
+        icon: 'form-check-radio.gif',
+        desc: 'Many examples showing different checkbox and radio group configurations.'
+    },{
+        text: 'File Upload Field',
+        url:  'form/file-upload.html',
+        icon: 'form-file-upload.gif',
+        desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'
+    },{
+        text: 'Spinner Field',
+        url:  'spinner/spinner.html',
+        icon: 'form-spinner.gif',
+        desc: 'An example of a custom spinner widget.'
+    },{
+        text: 'MultiSelect and ItemSelector',
+        url:  'multiselect/multiselect-demo.html',
+        icon: 'form-multiselect.gif',
+        desc: 'Example controls for selecting a list of items in forms.'
+    },
+    {
+        text: 'Slider Field',
+        url:  'slider/slider-field.html',
+        icon: 'form-slider.png',
+        desc: 'Example usage of an Ext.Slider to select a number value in a form.',
+           status : 'new'
+    },
+    {
+        text: 'Forms with vBox layout',
+        url:  'form/vbox-form.html',
+        icon: 'form-vbox.gif',
+        desc: 'Example usage of the vBox layout with forms. An added bonus is the FieldReplicator plugin.',
+           status : 'new'
+    },
+    {
+        text  : 'Composite Fields',
+        url   : 'form/composite-field.html',
+        icon  : 'form-composite.png',
+        desc  : 'Example usage of the Composite Fields to place several fields on a single form row.',
+           status: 'new'
+    }]
+},{
+    title: 'Toolbars and Menus',
+    samples: [{
+        text: 'Basic Toolbar',
+        url:  'menu/menus.html',
+        icon: 'toolbar.gif',
+        desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.',
+        status: 'updated'
+    },{
+        text: 'Toolbar Overflow',
+        url:  'toolbar/overflow.html',
+        icon: 'toolbar-overflow.gif',
+        desc: 'Dynamic overflow of toolbar buttons into an Ext.menu.',
+        status: 'new'
+    },{
+        text: 'Toolbar Button Groups',
+        url:  'toolbar/toolbars.html',
+        icon: 'toolbar-button-groups.gif',
+        desc: 'Group buttons together in the toolbar.',
+        status: 'new'
+    },{
+        text: 'Ext Actions',
+        url:  'menu/actions.html',
+        icon: 'toolbar-actions.gif',
+        desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'
+    },
+    {
+        text: 'Reorderable Toolbar',
+        url:  'toolbar/reorderable.html',
+        icon: 'toolbar-reorderable.png',
+        desc: 'Items within a toolbar can be reordered using this plugin.',
+        status: 'new'
+    },
+    {
+        text: 'Droppable Toolbar',
+        url:  'toolbar/droppable.html',
+        icon: 'toolbar-droppable.png',
+        desc: 'Items can be dropped onto a Toolbar and easily turned into items with this plugin.',
+        status: 'new'
+    },
+    {
+        text: 'Status Bar',
+        url:  'statusbar/statusbar-demo.html',
+        icon: 'statusbar-demo.gif',
+        desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.',
+        status: 'updated'
+    },{
+        text: 'Status Bar (Advanced)',
+        url:  'statusbar/statusbar-advanced.html',
+        icon: 'statusbar-adv.gif',
+        desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.',
+        status: 'updated'
+    }]
+},{
+    title: 'Templates and DataView',
+    samples: [{
+        text  : 'Templates',
+        url   : 'core/templates.html',
+        icon  : 'templates.gif',
+        desc  : 'A simple example of rendering views from templates bound to data objects.'
+    },{
+        text  : 'DataView',
+        url   : 'view/data-view.html',
+        icon  : 'data-view.gif',
+        desc  : 'A basic DataView with custom plugins for editable labels and drag selection of items.'
+    },{
+        text  : 'DataView (advanced)',
+        url   : 'view/chooser.html',
+        icon  : 'chooser.gif',
+        desc  : 'A more customized DataView supporting sorting and filtering with multiple templates.'
+    },{
+        text  : 'ListView',
+        url   : 'view/list-view.html',
+        icon  : 'list-view.gif',
+        desc  : 'A high performance tabular DataView to be used as a lightweight grid.',
+        status: 'new'
+    },
+    {
+        text  : 'Animated DataView',
+        url   : 'view/animated-dataview.html',
+        icon  : 'animated-dataview.png',
+        desc  : 'Transition animation plugin applied to a standard DataView',
+        status: 'new'
+    },
+    {
+        text  : 'Multi-sort DataView',
+        url   : 'view/multisort-dataview.html',
+        icon  : 'multisort-dataview.png',
+        desc  : 'Example demonstrating the ability to sort a DataView by multiple sorters.',
+        status: 'new'
+    }]
+},{
+    title   : 'Drag and Drop',
+    samples :  [{
+        text : 'Grid to Grid Drag and Drop',
+        url  : 'dd/dnd_grid_to_grid.html',
+        icon : 'dd-gridtogrid.gif',
+        desc : 'A simple drag and drop from grid to grid implementation.'
+    },{
+        text : 'Grid to FormPanel Drag and Drop',
+        url  : 'dd/dnd_grid_to_formpanel.html',
+        icon : 'dd-gridtoformpanel.gif',
+        desc : 'A basic drag and drop from grid to formpanel.'
+    },{
+        text : 'Field to Grid Drag and Drop',
+        url  : 'dd/field-to-grid-dd.html',
+        icon : 'dd-fieldtogrid.gif',
+        desc : 'Drag from a form field and drop on a grid.',
+        status: 'new'
+    },{
+        text : 'Custom Drag and Drop',
+        url  : 'dd/dragdropzones.html',
+        icon : 'dd-zones.gif',
+        desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'
+    }]
+},{
+    title: 'Direct',
+    samples: [{
+        text: 'Direct',
+        url:  'direct/direct.php',
+        icon: 'direct.gif',
+        desc: 'An example demonstrating Remoting and Polling the server',
+        status: 'new'
+    },{
+        text: 'Direct Form',
+        url:  'direct/direct-form.php',
+        icon: 'direct.gif',
+        desc: 'Ext.Direct Remoting with a Form',
+        status: 'new'
+    },{
+        text: 'Direct TreeLoader',
+        url:  'direct/direct-tree.php',
+        icon: 'direct.gif',
+        desc: 'Ext.Direct Remoting with a Tree',
+        status: 'new'
+    }]
+},{
+    title: 'Miscellaneous',
+    samples: [{
+        text: 'History',
+        url: 'history/history.html',
+        icon: 'history.gif',
+        desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'
+    },{
+        text: 'Google Maps',
+        url: 'window/gmap.html',
+        icon: 'gmap-panel.gif',
+        desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'
+    },{
+        text: 'Editor',
+        url: 'simple-widgets/editor.html',
+        icon: 'editor.gif',
+        desc: 'An example demonstrating the ease of use of the Ext.editor class to modify DOM elements',
+        status: 'new'
+    },{
+        text: 'Slider',
+        url: 'slider/slider.html',
+        icon: 'slider.gif',
+        desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and multiple thumbs.',
+        status: 'updated'
+    },{
+        text: 'QuickTips',
+        url: 'simple-widgets/qtips.html',
+        icon: 'qtips.gif',
+        desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.',
+        status: 'updated'
+    },{
+        text: 'Progress Bar',
+        url: 'simple-widgets/progress-bar.html',
+        icon: 'progress.gif',
+        desc: 'A basic progress bar component shown in various configurations and with custom styles.'
+    },{
+        text: 'Panels',
+        url: 'panel/panels.html',
+        icon: 'panel.gif',
+        desc: 'A basic collapsible panel example.',
+        status: 'updated'
+    },{
+        text: 'Bubble Panel',
+        url: 'panel/bubble-panel.html',
+        icon: 'panel-bubble.gif',
+        desc: 'An example illustrating customization of a standard panel.',
+        status: 'new'
+    },{
+        text: 'Resizable',
+        url: 'resizable/basic.html',
+        icon: 'resizable.gif',
+        desc: 'Examples of making any element resizable with various configuration options.'
+    },{
+        text: 'Spotlight',
+        url: 'core/spotlight.html',
+        icon: 'spotlight.gif',
+        desc: 'A utility for masking everything except a single element on the page to visually highlight it.',
+        status: 'new'
+    },{
+        text: 'Buttons',
+        url: 'button/buttons.html',
+        icon: 'buttons.gif',
+        desc: '',
+        status: 'new'
+    },{
+        text: 'Debugging Console',
+        url: 'debug/debug-console.html',
+        icon: 'debug-console.gif',
+        desc: '',
+        status: 'new'
+    },{
+        text: 'Localization (static)',
+        url: 'locale/dutch-form.html',
+        icon: 'locale-dutch.gif',
+        desc: 'Demonstrates fully localizing a form by including a custom locale script.'
+    },{
+        text: 'Localization (dynamic)',
+        url: 'locale/multi-lang.html',
+        icon: 'locale-switch.gif',
+        desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'
+    }]
+}];