-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 Calendar',
- url: 'calendar/index.html',
- icon: 'calendar.gif',
- desc: 'Example Calendar application. Demonstrates the new Day, Week and Month views and how to combine them.',
- status: 'new'
- },
- {
- text: 'Ext JS API Documentation',
- url: '../docs/index.html',
- icon: 'docs.gif',
- desc: 'API Documentation application.'
- },
- {
- 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'
- }
- // {
- // text: 'Pivot Grid',
- // url: 'pivotgrid/reconfigurable.html',
- // icon: 'pivotgrid.gif',
- // desc: 'An example demonstrating how to reconfigure a PivotGrid at run time',
- // 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: 'Pivot Grid',
- samples: [
- {
- text: 'Pivot Grid',
- url: 'pivotgrid/simple.html',
- icon: 'pivotgrid.gif',
- desc: 'The powerful new PivotGrid component, demonstrating data reduction and analysis capabilities.',
- status: 'new'
- },
- {
- text: 'Customised Pivot Grid',
- url: 'pivotgrid/countries.html',
- icon: 'pivotgrid-cellcls.gif',
- desc: 'A PivotGrid with its appearance customised based on summarized data',
- status: 'new'
- },
- {
- text: 'Pivot Grid Examples',
- url: 'pivotgrid/people.html',
- icon: 'pivotgrid-people.gif',
- desc: 'Several Pivot Grids showing different views of the same data source',
- status: 'new'
- }
- ]
-},
-{
- 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: '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.',
+ status: 'updated'
+ },
+ {
+ 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: '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.'
+ },
+ {
+ text: 'Grouping',
+ url: 'grid/groupgrid.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: '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 feature providing custom data filtering menus that support various data types.',
+ status: 'updated'
+ },
+ {
+ 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: 'Multiple Sorting',
+ url: 'grid/multiple-sorting.html',
+ icon: '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: '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: '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: 'grid-summary.gif',
+ desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.',
+ status: 'updated'
+ },
+ {
+ text: 'Grid with 50,0000 Rows',
+ url: 'grid/infinite-scroll.html',
+ icon: 'grid-infinite-scroll.gif',
+ desc: 'Sample grid which dynamically loads 50,000 rows.',
+ status: 'new'
+ },
+ {
+ text: 'Grid with Live Search Capability',
+ url: 'grid/live-search-grid.html',
+ icon: 'grid-live-search.gif',
+ desc: 'Grid with Live Search Capability.',
+ status: 'new'
+ },
+ {
+ text: 'Grid with Locking Capability',
+ 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: 'updated'
+ },
+ {
+ text: 'Grouping with Remote Summary',
+ url: 'grid/remote-group-summary-grid.html',
+ icon: '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: '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: '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: '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: '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: '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: 'progress-bar-pager.gif',
+ desc: "Progress Bar Pager Extension."
+ },{
+ text: 'Property Grid',
+ url: 'grid/property.html',
+ icon: 'grid-property.gif',
+ desc: "Create a property grid from an object."
+ },{
+ text: 'Grid From Markup',
+ url: 'grid/transform-dom.html',
+ icon: 'grid-transform.gif',
+ desc: "Create a grid with from an existing, unformatted HTML table."
+ }
+ ]
+ },
+ {
+ title: 'Charts',
+ samples: [
+ {
+ text: 'Area Charts',
+ url: 'charts/Area.html',
+ icon: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'column2.gif',
+ desc: 'A Column chart with customized theme and animation transitions',
+ status: 'new'
+ },
+ {
+ text: 'Mixed Series Chart',
+ url: 'charts/Mixed.html',
+ icon: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'reload-chart.gif',
+ desc: 'Display a Column Chart Sample that animates when refreshing the data set',
+ 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: '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: 'Tab overflow menu',
+ url: 'tabs/tab-scroller-menu.html',
+ icon: 'tabs-adv.gif',
+ desc: 'Demonstrates the TabPanel overflow menu extension, which makes management of large numbers of tabs easier',
+ status: 'updated'
+ }
+ ]
+ },
+ {
+ title: 'Windows',
+ samples: [
+ {
+ text: 'Window Variations',
+ url: 'window/window.html',
+ icon: '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: 'window.gif',
+ desc: 'A window containing a basic BorderLayout with nested 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.'
+ }
+ ]
+ },
+ {
+ 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: 'tree/treegrid.html',
+ icon: 'tree-columns.gif',
+ desc: 'The TreeGrid component',
+ status: 'updated'
+ },
+ {
+ text: 'Check Tree',
+ url: 'tree/check-tree.html',
+ icon: 'tree-check.gif',
+ desc: 'An example showing simple checkbox selection in a tree.'
+ },
+ {
+ text: 'XML Tree',
+ url: 'tree/xml-tree.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.'
+ },
+ {
+ text: 'Border Layout',
+ url: 'layout/border.html',
+ icon: '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: 'layout-accordion.gif',
+ desc: 'A basic accordion layout within a border layout.'
+ },
+ {
+ 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.'
+ },
+ {
+ text: 'VBox Layout',
+ url: 'layout/vbox.html',
+ icon: 'layout-vbox.gif',
+ desc: 'Interactive layout illustrating the capabilities of the VBox Layout.'
+ },
+ {
+ text: 'Complex Layout',
+ url: 'layout/complex.html',
+ icon: 'complex-layout.gif',
+ desc: 'A complex layout example.',
+ status: 'updated'
+ }
+ ]