examples.json

[
    {
        "title": "Combination Examples",
        "items": [
			{
                "text": "Kitchen Sink (Webkit only)",
                "url": "kitchensink/index.html",
                "icon": "shared/screens/kitchensink.gif",
                "desc": "Showcase of Ext JS components using a preview release of the new Neptune theme"
            },
            {
                "text": "Feed Viewer",
                "url": "feed-viewer/feed-viewer.html",
                "icon": "shared/screens/feeds.gif",
                "desc": "RSS feed reader example application that features a swappable reader panel layout.",
                "status": "updated"
            },
            {
                "text": "Ext JS Calendar",
                "url": "calendar/index.html",
                "icon": "shared/screens/calendar.gif",
                "desc": "Example Calendar application. Demonstrates the new Day, Week and Month views and how to combine them.",
                "status": "new"
            },
            {
                "text": "Web Desktop",
                "url": "desktop/desktop.html",
                "icon": "shared/screens/desktop.gif",
                "desc": "Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.",
                "status": "updated"
            },
            {
                "text": "Portal Demo",
                "url": "portal/portal.html",
                "icon": "shared/screens/portal.gif",
                "desc": "A page layout using several custom extensions to provide a web portal interface.",
                "status": "updated"
            },
            {
                "text": "Ext JS 3 & 4 on one page",
                "url": "sandbox/sandbox.html",
                "icon": "shared/screens/sandbox.gif",
                "desc": "This example demonstrates Ext JS 4's sandboxing behavior which allows you to run Ext JS 3 & 4 on the same page.",
                "status": "new"
            },
            {
                "text": "Image Viewer",
                "url": "organizer/organizer.html",
                "icon": "shared/screens/organizer.gif",
                "desc": "DataView and TreePanel example that demonstrates dragging data items from a DataView into a TreePanel."
            },
            {
                "text": "Theme Viewer",
                "url": "themes/index.html",
                "icon": "shared/screens/themes.gif",
                "desc": "View and test every Ext component against bundled Ext themes."
            },
            {
                "text": "Simple Tasks",
                "url": "simple-tasks/index.html",
                "icon": "shared/screens/tasks.gif",
                "desc": "Complete personal task management application example",
                "status": "new"
            }
        ]
    },
    {
        "title": "Accessibility",
        "items": [
            {
                "text": "Keyboard Feed Viewer",
                "url": "key-feed-viewer/feed-viewer.html",
                "icon": "shared/screens/keyboard.gif",
                "desc": "Shows Ext JS 4's comprehensive keyboard support for users who have difficulty using a pointing device",
                "status": "new"

            },
            {
                "text": "Binding a Grid to a Form",
                "url": "form/form-grid-access.html",
                "icon": "shared/screens/form-grid-binding-access.gif",
                "desc": "A grid embedded within a FormPanel that uses the Accessibility theme."
            }
        ]
    },
    {
        "title": "Grids",
        "items": [
            {
                "text": "Basic Array Grid",
                "url": "grid/array-grid.html",
                "icon": "shared/screens/grid-array.gif",
                "desc": "A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.",
                "status": "updated"
            },
            {
                "text": "XML Grid",
                "url": "grid/xml-grid.html",
                "icon": "shared/screens/grid-xml.gif",
                "desc": "A simple read-only grid loaded from XML data."
            },
            {
                "text": "Paging",
                "url": "grid/paging.html",
                "icon": "shared/screens/grid-paging.gif",
                "desc": "A grid with paging, cross-domain data loading and custom- rendered expandable row bodies."
            },
            {
                "text": "Sliding Pager",
                "url": "grid/sliding-pager.html",
                "icon": "shared/screens/slider-pager.gif",
                "desc": "A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin."
            },
            {
                "text": "Grouping",
                "url": "grid/groupgrid.html",
                "icon": "shared/screens/grid-grouping.gif",
                "desc": "A basic grouping grid showing collapsible data groups that can be customized via the 'Group By' header menu option."
            },
            {
                "text": "Grid Plugins",
                "url": "grid/grid-plugins.html",
                "icon": "shared/screens/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": "shared/screens/grid-filter.gif",
                "desc": "Grid feature providing custom data filtering menus that support various data types.",
                "status": "updated"
            },
            {
                "text": "Grid Data Binding (basic)",
                "url": "grid/binding.html",
                "icon": "shared/screens/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": "shared/screens/grid-data-binding.gif",
                "desc": "Refactoring the basic data binding example to use a class-based application design model."
            },
            {
                "text": "Multiple Sorting",
                "url": "grid/multiple-sorting.html",
                "icon": "shared/screens/grid-multiple-sorting.gif",
                "desc": "An example that shows multi-level sorting in a Grid Panel."
            },
            {
                "text": "Grid Cell Editing",
                "url": "grid/cell-editing.html",
                "icon": "shared/screens/grid-cell-editing.gif",
                "desc": "An example that shows cell editing in a Grid Panel.",
                "status": "updated"
            },
            {
                "text": "Grouped Header Grid",
                "url": "grid/group-header-grid.html",
                "icon": "shared/screens/grid-grouped-headers.gif",
                "desc": "A basic grouping grid showing collapsible data groups that can be customized via the 'Group By' header menu option.",
                "status": "updated"
            },
            {
                "text": "Grid Grouping with Summary",
                "url": "grid/group-summary-grid.html",
                "icon": "shared/screens/grid-summary.gif",
                "desc": "Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.",
                "status": "updated"
            },
            {
                "text": "Infinite Grid",
                "url": "grid/infinite-scroll.html",
                "icon": "shared/screens/grid-infinite-scroll.gif",
                "desc": "Sample grid which scrolls through thousands of rows dynamically loaded from a server",
                "status": "new"
            },
            {
                "text": "Grid with Live Search Capability",
                "url": "grid/live-search-grid.html",
                "icon": "shared/screens/grid-live-search.gif",
                "desc": "Grid with Live Search Capability.",
                "status": "new"
            },
            {
                "text": "Grid with Locking Capability",
                "url": "grid/locking-grid.html",
                "icon": "shared/screens/grid-locking.gif",
                "desc": "An example extension that introduces the ability to add locking columns to the GridPanel.",
                "status": "updated"
            },
            {
                "text": "Grouping with Remote Summary",
                "url": "grid/remote-group-summary-grid.html",
                "icon": "shared/screens/grid-group-summaries.gif",
                "desc": "Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations."
            },
            {
                "text": "Grid Row Editing",
                "url": "grid/row-editing.html",
                "icon": "shared/screens/grid-row-editor.gif",
                "desc": "An editable grid which allows the user to make modifications to an entire record at once.",
                "status": "updated"
            },
            {
                "text": "RESTful Store with GridPanel and RowEditor",
                "url": "restful/restful.html",
                "icon": "shared/screens/grid-row-editor.gif",
                "desc": "A RESTful Store with JsonWriter which automatically generates CRUD requests to the server."
            },
            {
                "text": "Editable Grid with Writable Store",
                "url": "writer/writer.html",
                "icon": "shared/screens/writer-thumb.gif",
                "desc": "This Store uses Data's writer to automatically generate CRUD requests to the server through a standard HttpProxy."
            },
            {
                "text": "Buffered Scrolling",
                "url": "grid/buffer-grid.html",
                "icon": "shared/screens/buffer-grid.gif",
                "desc": "The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.",
                "status": "updated"
            },
            {
                "text": "List View",
                "url": "grid/list-view.html",
                "icon": "shared/screens/list-view.gif",
                "desc": "Ext 4 replaces Ext.ListView with the default Ext.grid.Panel.",
                "status": "updated"
            },
            {
                "text": "Progress Bar Pager",
                "url": "grid/progress-bar-pager.html",
                "icon": "shared/screens/progress-bar-pager.gif",
                "desc": "Progress Bar Pager Extension."
            },
            {
                "text": "Property Grid",
                "url": "grid/property.html",
                "icon": "shared/screens/grid-property.gif",
                "desc": "Create a property grid from an object."
            },
            {
                "text": "Grid From Markup",
                "url": "grid/transform-dom.html",
                "icon": "shared/screens/grid-transform.gif",
                "desc": "Create a grid with from an existing, unformatted HTML table."
            },
            {
                "text": "Locking Grouping Grid with Summary",
                "url": "grid/locking-group-summary-grid.html",
                "icon": "shared/screens/grid-summary.gif",
                "desc": "Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations. With column locking capability",
                "status": "new"
            },
            {
                "text": "Infinite Grid with remote filter",
                "url": "grid/infinite-scroll-with-filter.html",
                "icon": "shared/screens/grid-infinite-scroll.gif",
                "desc": "Sample grid which scrolls through thousands of rows dynamically loaded from a server with a filtering UI",
                "status": "new"
            },
            {
                "text": "Locking Grouping Grid with Summary and grouped headers",
                "url": "grid/locking-grp-summary-grp-hdrs-grid.html",
                "icon": "shared/screens/grid-summary.gif",
                "desc": "Grouped grid with locked columns and grouped column headers",
                "status": "new"
            }
        ]
    },
    {
        "title": "Charts",
        "items": [
            {
                "text": "Area Charts",
                "url": "charts/Area.html",
                "icon": "shared/screens/chart-area.gif",
                "desc": "Display 7 sets of random data in an area series. Reload data will randomly generate a new set of data in the store.",
                "status": "new"
            },
            {
                "text": "Custom Area Charts",
                "url": "charts/Area - BrowserStats.html",
                "icon": "shared/screens/area-browsers.gif",
                "desc": "Display browser usage trends in an area series. This chart uses custom gradients for the colors and the legend is interactive.",
                "status": "new"
            },
            {
                "text": "Bar Charts",
                "url": "charts/Bar.html",
                "icon": "shared/screens/chart-bar.gif",
                "desc": "Display a sets of random data in a bar series. Reload data will randomly generate a new set of data in the store.",
                "status": "new"
            },
            {
                "text": "Custom Bar Charts",
                "url": "charts/BarRenderer.html",
                "icon": "shared/screens/chart-bar-renderer.gif",
                "desc": "Displaying a horizontal bar series with a bar renderer that modifies the color of each bar.",
                "status": "new"
            },
            {
                "text": "Complex Dashboard",
                "url": "charts/FormDashboard.html",
                "icon": "shared/screens/form-dashboard.gif",
                "desc": "Showing companies information in a complex dashboard. Edit the information for each record in the form to see live updates in the charts and grid.",
                "status": "new"
            },
            {
                "text": "Rich Tips",
                "url": "charts/TipsChart.html",
                "icon": "shared/screens/rich-tips.gif",
                "desc": "Showing a line series with rich tips. Tips show dynamic information in Grid and Pie chart components.",
                "status": "new"
            },
            {
                "text": "Themed Line Charts",
                "url": "charts/Charts.html",
                "icon": "shared/screens/chart-themed.gif",
                "desc": "Using 3.x theme. Displaying multiple charts and mixed charts with mouse over and click interaction.",
                "status": "new"
            },
            {
                "text": "Column Charts",
                "url": "charts/Column.html",
                "icon": "shared/screens/chart-column.gif",
                "desc": "Display a set of random data in a column series. Reload data will randomly generate a new set of data in the store.",
                "status": "new"
            },
            {
                "text": "Line Charts",
                "url": "charts/Line.html",
                "icon": "shared/screens/chart-line.gif",
                "desc": "Display 2 sets of random data in a line series. Reload data will randomly generate a new set of data in the store.",
                "status": "new"
            },
            {
                "text": "Column Custom Background",
                "url": "charts/Column2.html",
                "icon": "shared/screens/column2.gif",
                "desc": "A Column chart with customized theme and animation transitions",
                "status": "new"
            },
            {
                "text": "Mixed Series Chart",
                "url": "charts/Mixed.html",
                "icon": "shared/screens/chart-mixed.gif",
                "desc": "Display 3 sets of random data using a line, bar, and scatter series. Reload data will randomly generate a new set of data in the store.",
                "status": "new"
            },
            {
                "text": "Pie Charts",
                "url": "charts/Pie.html",
                "icon": "shared/screens/chart-pie.gif",
                "desc": "Display 5 sets of random data using a pie chart. Reload data will randomly generate a new set of data in the store.",
                "status": "new"
            },
            {
                "text": "Custom Pie Charts",
                "url": "charts/PieRenderer.html",
                "icon": "shared/screens/chart-pie-renderer.gif",
                "desc": "Display 5 sets of random data using a pie chart. A renderer has been set up on to dynamically change the length and color of each slice based on the data.",
                "status": "new"
            },
            {
                "text": "Radar Charts",
                "url": "charts/Radar.html",
                "icon": "shared/screens/chart-radar.gif",
                "desc": "Display 3 sets of random data in a radar series. Note this example uses a radial axis.",
                "status": "new"
            },
            {
                "text": "Filled Radar Charts",
                "url": "charts/RadarFill.html",
                "icon": "shared/screens/chart-radar-fill.gif",
                "desc": "Display 3 sets of random data in a filled radar series. Click or hover on the legend items to highlight and remove them from the chart.",
                "status": "new"
            },
            {
                "text": "Scatter Charts",
                "url": "charts/Scatter - Renderer.html",
                "icon": "shared/screens/chart-scatter.gif",
                "desc": "Display 2 sets of random data in a scatter series. A renderer has been set up on to dynamically change the size and color of the items based upon it's data.",
                "status": "new"
            },
            {
                "text": "Stacked Bar Charts",
                "url": "charts/StackedBar.html",
                "icon": "shared/screens/chart-bar-stacked.gif",
                "desc": "Showing movie taking by genre as a stacked bar chart sample. Filter the stacks by clicking on the legend items.",
                "status": "new"
            },
            {
                "text": "Live Updated Chart",
                "url": "charts/LiveUpdates.html",
                "icon": "shared/screens/live-updated.gif",
                "desc": "Showing a line series with data updating at a regular interval.",
                "status": "new"
            },
            {
                "text": "Live Animated Chart",
                "url": "charts/LiveAnimated.html",
                "icon": "shared/screens/live-animated.gif",
                "desc": "Showing a line series with smooth transitions on data updating at regular intervals.",
                "status": "new"
            },
            {
                "text": "Gauge Chart",
                "url": "charts/Gauge.html",
                "icon": "shared/screens/gauge.gif",
                "desc": "Display three custom gauge charts bound to different data stores with different configuration options and easings.",
                "status": "new"
            },
            {
                "text": "Grouped Bar",
                "url": "charts/GroupedBar.html",
                "icon": "shared/screens/grouped-bar.gif",
                "desc": "Display 3 sets of random data in a grouped bar series.",
                "status": "new"
            },
            {
                "text": "Reload Chart",
                "url": "charts/ReloadChart.html",
                "icon": "shared/screens/reload-chart.gif",
                "desc": "Display a Column Chart Sample that animates when refreshing the data set",
                "status": "new"
            }
        ]
    },
    {
        "title": "Tabs",
        "items": [
            {
                "text": "Basic Tabs",
                "url": "tabs/tabs.html",
                "icon": "shared/screens/tabs.gif",
                "desc": "Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events."
            },
            {
                "text": "Advanced Tabs",
                "url": "tabs/tabs-adv.html",
                "icon": "shared/screens/tabs-adv.gif",
                "desc": "Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin."
            },
            {
               "text": "Tab overflow menu",
               "url": "tabs/tab-scroller-menu.html",
               "icon": "shared/screens/tabs-adv.gif",
               "desc": "Demonstrates the TabPanel overflow menu extension, which makes management of large numbers of tabs easier",
               "status": "updated"
            },
            {
                "text": "Group Tabs",
                "url": "grouptabs/grouptabs.html",
                "icon": "shared/screens/group-tabs.gif",
                "desc": "A custom example on how to setup tab grouping using vertical tabs.",
                "status": "new"
            }
        ]
    },
    {
        "title": "Windows",
        "items": [
            {
                "text": "Window Variations",
                "url": "window/window.html",
                "icon": "shared/screens/window-layout.gif",
                "desc": "A collection of Windows in different configurations, showing headers attached to any side of the window.",
                "status": "new"
            },
            {
                "text": "Layout Window",
                "url": "window/layout.html",
                "icon": "shared/screens/window.gif",
                "desc": "A window containing a basic BorderLayout with nested TabPanel."
            },
            {
                "text": "MessageBox",
                "url": "message-box/msg-box.html",
                "icon": "shared/screens/msg-box.gif",
                "desc": "Different styles include confirm, alert, prompt, progress and wait and also support custom icons."
            }
        ]
    },
    {
        "title": "Trees",
        "items": [
            {
                "text": "Drag and Drop Reordering",
                "url": "tree/reorder.html",
                "icon": "shared/screens/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": "shared/screens/tree-two.gif",
                "desc": "Drag and drop between two different sorted TreePanels."
            },
            {
                "text": "TreeGrid",
                "url": "tree/treegrid.html",
                "icon": "shared/screens/tree-columns.gif",
                "desc": "The TreeGrid component",
                "status": "updated"
            },
            {
                "text": "Check Tree",
                "url": "tree/check-tree.html",
                "icon": "shared/screens/tree-check.gif",
                "desc": "An example showing simple checkbox selection in a tree."
            },
            {
                "text": "XML Tree",
                "url": "tree/xml-tree.html",
                "icon": "shared/screens/tree-xml-loader.gif",
                "desc": "A custom TreeLoader implementation that demonstrates loading a tree from an XML document."
            }
        ]
    },
    {
        "title": "Layout Managers",
        "items": [
            {
                "text": "Layout Browser",
                "url": "layout-browser/layout-browser.html",
                "icon": "shared/screens/layout-browser.gif",
                "desc": "Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples."
            },
            {
                "text": "Border Layout",
                "url": "layout/border.html",
                "icon": "shared/screens/border-layout.gif",
                "desc": "A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.",
                "status": "updated"
            },
            {
                "text": "Accordion Layout",
                "url": "layout/accordion.html",
                "icon": "shared/screens/layout-accordion.gif",
                "desc": "A basic accordion layout within a border layout."
            },
            {
                "text": "Anchor Layout (Form)",
                "url": "form/anchoring.html",
                "icon": "shared/screens/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": "shared/screens/layout-anchor.gif",
                "desc": "An example of Panels anchored in the browser window."
            },
            {
                "text": "Column Layout",
                "url": "layout/column.html",
                "icon": "shared/screens/layout-column.gif",
                "desc": "An example of Panels managed by a column layout."
            },
            {
                "text": "Table Layout",
                "url": "layout/table.html",
                "icon": "shared/screens/layout-table.gif",
                "desc": "An example of Panels managed by a table layout."
            },
            {
               "text": "HBox Layout",
               "url": "layout/hbox.html",
               "icon": "shared/screens/layout-column.gif",
               "desc": "Interactive layout illustrating the capabilities of the HBox Layout."
            },
            {
                "text": "VBox Layout",
                "url": "layout/vbox.html",
                "icon": "shared/screens/layout-vbox.gif",
                "desc": "Interactive layout illustrating the capabilities of the VBox Layout."
            },
            {
                "text": "Complex Layout",
                "url": "layout/complex.html",
                "icon": "shared/screens/complex-layout.gif",
                "desc": "A complex layout example.",
                "status": "updated"
            }
        ]
    },
    {
        "title": "Drawing",
        "items": [
            {
                "text": "Resizable Sencha Logo",
                "url": "draw/Sencha.html",
                "icon": "shared/screens/draw-sencha.gif",
                "desc": "Resolution independent Sencha logo in a resizable component.",
                "status": "new"
            },
            {
                "text": "Browser Logos",
                "url": "draw/Logos.html",
                "icon": "shared/screens/draw-logos.gif",
                "desc": "Resolution independent logos of all the popular browsers.",
                "status": "new"
            },
            {
                "text": "Tiger",
                "url": "draw/Tiger.html",
                "icon": "shared/screens/draw-tiger.gif",
                "desc": "The classic SVG Tiger in a floatable, draggable component. Scalable to any size, fully resolution independent.",
                "status": "new"
            },
            {
                "text": "Rotate Text",
                "url": "draw/Rotate Text.html",
                "icon": "shared/screens/draw-rotate-text.gif",
                "desc": "Create text in a Draw Component which can be rotated easily in any browser.",
                "status": "new"
            }
        ]
    },
    {
        "title": "Drag and Drop",
        "items": [
            {
                "text": "Grid to Grid DnD",
                "url": "dd/dnd_grid_to_grid.html",
                "icon": "shared/screens/dd-gridtogrid.gif",
                "desc": "Shows how rows can be easily dragged and dropped between two or more grids"
            },
            {
                "text": "Grid to Form DnD",
                "url": "dd/dnd_grid_to_formpanel.html",
                "icon": "shared/screens/dd-gridtoformpanel.gif",
                "desc": "Enables a user to drag a record from a grid and drop it into a form, where it can be edited"
            },
            {
                "text": "Field to Grid DnD",
                "url": "dd/field-to-grid-dd.html",
                "icon": "shared/screens/dd-fieldtogrid.gif",
                "desc": "Demonstrates dragging a value from a field onto a grid cell"
            },
            {
                "text": "Custom Drag and Drop",
                "url": "dd/dragdropzones.html",
                "icon": "shared/screens/dd-zones.gif",
                "desc": "A completely custom Drag and Drop example showing DnD between a DataView and a grid"
            }
        ]
    },
    {
        "title": "Toolbars and Menus",
        "items": [
            {
                "text": "Basic Toolbar",
                "url": "menu/menus.html",
                "icon": "shared/screens/toolbar.gif",
                "desc": "Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.",
                "status": "updated"
            },
            {
                "text": "Toolbar Button Groups",
                "url": "toolbar/toolbars.html",
                "icon": "shared/screens/toolbar-button-groups.gif",
                "desc": "Group buttons together in the toolbar."
            },
            {
                "text": "Vertical Toolbars",
                "url": "toolbar/vertical-toolbars.html",
                "icon": "shared/screens/toolbar.gif",
                "desc": "Vertical Toolbars on the left and right. Combined vertical and horizontal toolbars.",
                "status": "new"
            },
            {
               "text": "Ext Grid Actions",
               "url": "menu/action-grid.html",
               "icon": "shared/screens/actions-grid.gif",
               "desc": "Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.",
               "status": "updated"
            },
            {
                "text": "Reorderable Toolbar",
                "url": "toolbar/reorderable.html",
                "icon": "shared/screens/toolbar-reorderable.png",
                "desc": "Items within a toolbar can be reordered using this plugin."
            },
            {
               "text": "Overflow Toolbar",
               "url": "toolbar/overflow.html",
               "icon": "shared/screens/toolbar-reorderable.png",
               "desc": "Items within a toolbar will be placed into an overflow menu if the toolbar is too narrow."
            },
            {
                "text": "Status Bar",
                "url": "statusbar/statusbar-demo.html",
                "icon": "shared/screens/statusbar-demo.gif",
                "desc": "A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons."
            },
            {
                "text": "Status Bar (Advanced)",
                "url": "statusbar/statusbar-advanced.html",
                "icon": "shared/screens/statusbar-adv.gif",
                "desc": "Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking."
            },
            {
                "text": "Ext Toolbar Actions",
                "url": "menu/actions.html",
                "icon": "shared/screens/actions.gif",
                "desc": "Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class."
            }

        ]
    },
    {
        "title": "ComboBox",
        "items": [
            {
                "text": "Basic ComboBox",
                "url": "form/combos.html",
                "icon": "shared/screens/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": "shared/screens/combo-custom.gif",
                 "desc": "Customized combo with template-based list rendering, remote loading and paging."
            }
        ]
    },
    {
        "title": "DataView",
        "items": [
            {
                "text": "DataView",
                "url": "view/data-view.html",
                "icon": "shared/screens/data-view.gif",
                "desc": "This example shows how to use an Ext.view.View",
                "status": "updated"
            },
            {
                "text": "Animated DataView",
                "url": "view/animated-dataview.html",
                "icon": "shared/screens/animated-dataview.png",
                "desc": "Transition animation plugin applied to a standard DataView"
            },
            {
                "text": "Multi-sort DataView",
                "url": "view/multisort/multisort.html",
                "icon": "shared/screens/multisort-dataview.png",
                "desc": "Example demonstrating the ability to sort a DataView by multiple sorters."
            },
            {
                "text": "Advanced DataView",
                "url": "view/chooser/chooser.html",
                "icon": "shared/screens/advanced-dataview.png",
                "desc": "DataView which allows you to filter and sort images."
            }
        ]
    },
    {
        "title": "Forms",
        "items": [
            {
                "text": "Dynamic Forms",
                "url": "form/dynamic.html",
                "icon": "shared/screens/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": "shared/screens/form-xml.gif",
                "desc": "Ajax-loaded form fields from remote XML data and remote field validation on submit."
            },
            {
                "text": "Contact Us Form",
                "url": "form/contact-form.html",
                "icon": "shared/screens/form-contact.gif",
                "desc": "An example of a common popup Contact Us form.",
                "status": "new"
            },
            {
                "text": "Custom Search Fields",
                "url": "form/forum-search.html",
                "icon": "shared/screens/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": "shared/screens/form-grid-binding.gif",
                "desc": "A grid embedded within a FormPanel that automatically loads records into the form on row selection.",
                "status": "updated"
            },
            {
                "text": "Field Types",
                "url": "form/field-types.html",
                "icon": "shared/screens/form-field-types.gif",
                "desc": "This example shows off all of the field types available in Ext JS in lots of different configurations.",
                "status": "updated"
            },
            {
                 "text": "Advanced Validation",
                 "url": "form/adv-vtypes.html",
                 "icon": "shared/screens/form-adv-vtypes.gif",
                 "desc": "Relational form field validation using custom vtypes."
            },
            {
                 "text": "Checkbox/Radio Groups",
                 "url": "form/check-radio.html",
                 "icon": "shared/screens/form-check-radio.gif",
                 "desc": "Examples showing different checkbox and radio group configurations."
            },
            {
                "text": "File Upload Field",
                "url": "form/file-upload.html",
                "icon": "shared/screens/form-file-upload.gif",
                "desc": "A demo of how to give standard file upload fields a bit of Ext style using a custom class.",
                "status": "updated"
            },
            {
                "text": "Number Field",
                "url": "form/number.html",
                "icon": "shared/screens/form-spinner.gif",
                "desc": "An example of the Number field, with and without a spinner.",
                "status": "updated"
            },
            {
                "text": "MultiSelect and ItemSelector",
                "url": "multiselect/multiselect-demo.html",
                "icon": "shared/screens/form-multiselect.gif",
                "desc": "Example controls for selecting a list of items in forms.",
                "status": "updated"
            },
            {
                "text": "Registration Form",
                "url": "form/registration.html",
                "icon": "shared/screens/form-registration.gif",
                "desc": "An account registration form, with custom global error message display.",
                "status" : "new"
            },
            {
                "text": "Shopping Cart Checkout",
                "url": "form/checkout.html",
                "icon": "shared/screens/form-checkout.gif",
                "desc": "An example of a common shopping cart checkout form.",
                "status" : "new"
            },
            {
                "text": "Slider Field",
                "url": "slider/slider-field.html",
                "icon": "shared/screens/form-slider.png",
                "desc": "Example usage of an Ext.Slider to select a number value in a form."
            },
            {
                "text": "Forms with vBox layout",
                "url": "form/vbox-form.html",
                "icon": "shared/screens/form-vbox.gif",
                "desc": "Example usage of the vBox layout with forms. An added bonus is the FieldReplicator plugin.",
        	    "status": "new"
            },
            {
                "text": "Forms with hBox layout",
                "url": "form/hbox-form.html",
                "icon": "shared/screens/form-hbox.gif",
                "desc": "Example usage of the hBox layout with a form. Includes automatically adjusting validation messages.",
        	    "status": "new"
            },
            {
                 "text": "Field Containers",
                 "url": "form/fieldcontainer.html",
                 "icon": "shared/screens/form-fieldcontainer.png",
                 "desc": "Example usage of the FieldContainer to place several fields on a single form row.",
                 "status": "new"
            },
            {
                "text": "Form with absolute layout",
                "url": "form/absform.html",
                "icon": "shared/screens/form-absolute.gif",
                "desc": "A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.",
                "status": "new"
            },
            {
                "text": "Custom form Field",
                "url": "form/custom-form.html",
                "icon": "shared/screens/form-custom.gif",
                "desc": "A simple example that demonstrate how to create a custom form field.",
                "status": "new"
            }
        ]
    },
    {
        "title": "Direct",
        "items": [
            {
                "text": "Direct",
                "url": "direct/direct.html",
                "icon": "shared/screens/direct.gif",
                "desc": "An example demonstrating Remoting and Polling the server"
            },
            {
                "text": "Direct Form",
                "url": "direct/direct-form.html",
                "icon": "shared/screens/direct.gif",
                "desc": "Ext.Direct Remoting with a Form"
            },
            {
                "text": "Direct Grid",
                "url": "direct/direct-grid.html",
                "icon": "shared/screens/direct.gif",
                "desc": "Ext.Direct Remoting with a Grid"
            },
            {
                "text": "Direct TreeLoader",
                "url": "direct/direct-tree.html",
                "icon": "shared/screens/direct.gif",
                "desc": "Ext.Direct Remoting with a Tree",
                "status": "new"
            },
            {
                "text": "Direct Named Arguments",
                "url": "direct/named-arguments.html",
                "icon": "shared/screens/direct.gif",
                "desc": "Ext.Direct Named Arguments",
                "status": "new"
            }
        ]
    },
    {
        "title": "MVC",
        "items": [
            {
                "text": "Feed Viewer",
                "url": "app/feed-viewer/feed-viewer.html",
                "icon": "shared/screens/feeds.gif",
                "desc": "An MVC application version of the Feed Viewer example. This shows best practice for a small app",
                "status": "new"
            },
            {
                "text": "Nested Loading",
                "url": "app/nested-loading/nested-loading.html",
                "icon": "shared/screens/nested-loading.gif",
                "desc": "An MVC example that shows simple navigation and nested loading with the data package",
                "status": "new"
            }
        ]
    },
    {
        "title": "Miscellaneous",
        "items": [
            {
                "text": "History",
                "url": "history/history.html",
                "icon": "shared/screens/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": "shared/screens/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": "shared/screens/editor.gif",
                "desc": "An example demonstrating the ease of use of the Ext.editor class to modify DOM elements"
            },
            {
                "text": "Slider",
                "url": "slider/slider.html",
                "icon": "shared/screens/slider.gif",
                "desc": "A slider component that supports vertical mode, snapping, tooltips, customized styles and multiple thumbs.",
                "status": "updated"
            },
            {
                "text": "QuickTips",
                "url": "qtips/qtips.html",
                "icon": "shared/screens/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": "shared/screens/progress.gif",
                "desc": "A basic progress bar component shown in various configurations and with custom styles."
            },
            {
                "text": "Panels",
                "url": "panel/panel.html",
                "icon": "shared/screens/panel.gif",
                "desc": "A basic collapsible panel example.",
                "status": "updated"
            },
            {
                "text": "Resizable",
                "url": "resizer/basic.html",
                "icon": "shared/screens/resizable.gif",
                "desc": "Examples of making any element resizable with various configuration options."
            },
            {
                "text": "Buttons",
                "url": "button/button.html",
                "icon": "shared/screens/buttons.gif",
                "desc": "Shows buttons in many of their possible configurations"
            },
            {
                "text": "Spotlight",
                "url": "core/spotlight.html",
                "icon": "shared/screens/spotlight.gif",
                "desc": "A utility for masking everything except a single element on the page to visually highlight it."
            },
            {
                "text": "Keyboard Navigation",
                "url": "keynav/keynav.html",
                "icon": "shared/screens/keyboard.gif",
                "desc": "Shows a custom keyboard navigation using the KeyNav class",
                "status": "new"
            },
            {
                "text": "Localization (static)",
                "url": "locale/dutch-form.html",
                "icon": "shared/screens/locale-dutch.gif",
                "desc": "Demonstrates fully localizing a form by including a custom locale script."
            },
            {
                "text": "Localization (dynamic)",
                "url": "locale/multi-lang.html",
                "icon": "shared/screens/locale-switch.gif",
                "desc": "Dynamically render various Ext components in different locales by selecting from a locale list."
            },
            {
                "text": "Browser State Management",
                "url": "state/state.html",
                "icon": "shared/screens/state-saving.gif",
                "desc": "An example of storing your application's state.",
                "status": "new"
            },
            {
                "text": "Basic Templating",
                "url": "platform/templates.html",
                "icon": "shared/screens/templates.gif",
                "desc": "A basic templating example."
            },
            {
                "text": "Bubble Panel",
                "url": "panel/bubble-panel/bubble-panel.html",
                "icon": "shared/screens/panel-bubble.gif",
                "desc": "This is a custom panel UI to achieve a different look and feel while not changing the default appearance of an Ext.Panel.",
                "status": "updated"
            }
        ]
    }
]