3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
10 Ext.samples.samplesCatalog = [{
11 title: 'Combination Examples',
15 url: 'feed-viewer/view.html',
17 desc: 'RSS feed reader example application that features a swappable reader panel layout.'
21 url: 'desktop/desktop.html',
23 desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.'
26 text: 'Image Organizer',
27 url: 'image-organizer/index.html',
28 icon: 'image-organizer.gif',
29 desc: 'Image management application example utilizing MySQL lite and Ext.Direct.',
33 text: 'Ext JS Calendar',
34 url: 'calendar/index.html',
36 desc: 'Example Calendar application. Demonstrates the new Day, Week and Month views and how to combine them.',
40 text: 'Ext JS API Documentation',
41 url: '../docs/index.html',
43 desc: 'API Documentation application.'
46 text: 'Ext JS Forum Browser',
47 url: 'forum/forum.html',
49 desc: 'Ext JS online forums browser application.',
54 url: 'organizer/organizer.html',
55 icon: 'organizer.gif',
56 desc: 'DataView and TreePanel example that demonstrates dragging data items from a DataView into a TreePanel.'
59 text: 'Themes Viewer',
60 url: 'themes/index.html',
62 desc: 'View and test every Ext component against bundled Ext themes, or, your own custom themes.',
66 // text: 'Pivot Grid',
67 // url: 'pivotgrid/reconfigurable.html',
68 // icon: 'pivotgrid.gif',
69 // desc: 'An example demonstrating how to reconfigure a PivotGrid at run time',
74 title: 'Offline Support',
77 url: 'tasks/tasks.html',
79 desc: 'Personal task management application example that uses <a href="http://gears.google.com" target="_blank">Google Gears</a> for data storage.'
82 url: 'http://extjs.com/blog/2008/02/24/tasks2/',
84 desc: 'Complete personal task management application example that runs on <a href="http://labs.adobe.com/technologies/air/" target="_blank">Adobe AIR</a>.'
87 title: 'Accessibility',
89 text: 'Key Feed Viewer',
90 url: 'key-feed-viewer/view.html',
92 desc: 'Keyboard navigation within a complex layout.',
93 status: 'experimental'
96 url: 'tree/aria-tree.html',
98 desc: 'Demonstrating ARIA with a TreePanel',
99 status: 'experimental'
101 text: 'Custom Search Fields',
102 url: 'form/custom-access.html',
103 icon: 'form-custom-access.gif',
104 desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering. Uses the Accessibility theme.'
106 text: 'Binding a Grid to a Form',
107 url: 'form/form-grid-access.html',
108 icon: 'form-grid-binding-access.gif',
109 desc: 'A grid embedded within a FormPanel that uses the Accessibility theme.'
118 url: 'pivotgrid/simple.html',
119 icon: 'pivotgrid.gif',
120 desc: 'The powerful new PivotGrid component, demonstrating data reduction and analysis capabilities.',
124 text: 'Customised Pivot Grid',
125 url: 'pivotgrid/countries.html',
126 icon: 'pivotgrid-cellcls.gif',
127 desc: 'A PivotGrid with its appearance customised based on summarized data',
131 text: 'Pivot Grid Examples',
132 url: 'pivotgrid/people.html',
133 icon: 'pivotgrid-people.gif',
134 desc: 'Several Pivot Grids showing different views of the same data source',
142 text: 'Basic Array Grid',
143 url: 'grid/array-grid.html',
144 icon: 'grid-array.gif',
145 desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'
147 text: 'Property Grid',
148 url: 'grid/property-grid.html',
149 icon: 'grid-property.gif',
150 desc: 'An example of a traditional property grid as typically seen in development IDEs.'
152 text: 'Editable Grid',
153 url: 'grid/edit-grid.html',
154 icon: 'grid-edit.gif',
155 desc: 'An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.'
157 text: 'Row Editor Grid',
158 url: 'grid/row-editor.html',
159 icon: 'grid-row-editor.gif',
160 desc: 'An editable grid which allows the user to make modifications to an entire record at once. Also demonstrates the Ext.chart package. ',
164 url: 'grid/xml-grid.html',
165 icon: 'grid-xml.gif',
166 desc: 'A simple read-only grid loaded from XML data.'
169 url: 'grid/paging.html',
170 icon: 'grid-paging.gif',
171 desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
173 text: 'Progress Bar Pager',
174 url: 'grid/progress-bar-pager.html',
175 icon: 'progress-bar-pager.gif',
176 desc: 'An example of how to integrate the Progress Bar with the Paging Toolbar using a custom plugin.',
179 text: 'Sliding Pager',
180 url: 'grid/sliding-pager.html',
181 icon: 'slider-pager.gif',
182 desc: 'A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.',
186 url: 'grid/grouping.html',
187 icon: 'grid-grouping.gif',
188 desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
190 text: 'Grouping with Dynamic Summary',
191 url: 'grid/totals.html',
192 icon: 'grid-summary.gif',
193 desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.',
196 text: 'Grouping with Remote Summary',
197 url: 'grid/totals-hybrid.html',
198 icon: 'grid-summary.gif',
199 desc: 'Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.'
201 text: 'Grid Plugins',
202 url: 'grid/grid-plugins.html',
203 icon: 'grid-plugins.gif',
204 desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'
206 text: 'Grid Filtering',
207 url: 'grid-filtering/grid-filter-local.html',
208 icon: 'grid-filter.gif',
209 desc: 'Grid plugins providing custom data filtering menus that support various data types.',
212 text: 'Grid From Markup',
213 url: 'grid/from-markup.html',
214 icon: 'grid-from-markup.gif',
215 desc: 'Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.'
217 text: 'Grid Data Binding (basic)',
218 url: 'grid/binding.html',
219 icon: 'grid-data-binding.gif',
220 desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'
222 text: 'Grid Data Binding (advanced)',
223 url: 'grid/binding-with-classes.html',
224 icon: 'grid-data-binding.gif',
225 desc: 'Refactoring the basic data binding example to use a class-based application design model.'
227 text: 'Buffered GridView',
228 url: 'grid/buffer.html',
229 icon: 'grid-buffer.gif',
230 desc: 'GridView optimized for performance by rendering only visible rows.',
233 text: 'Editable Grid with Writable Store',
234 url: 'writer/writer.html',
235 icon: 'writer-thumb.gif',
236 desc: 'This Store uses JsonWriter to automatically generate CRUD requests to the server through a standard HttpProxy.',
239 text: 'RESTful Store with GridPanel and RowEditor',
240 url: 'restful/restful.html',
241 icon: 'grid-row-editor.gif',
242 desc: 'A RESTful Store with JsonWriter which automatically generates CRUD requests to the server.',
245 text: 'Locking GridView extension',
246 url: 'grid/locking-grid.html',
247 icon: 'grid-locking.gif',
248 desc: 'An example extension that introduces the ability to add locking columns to the GridPanel',
251 text: 'Grouping GridView extension',
252 url: 'grid/ColumnHeaderGroup.html',
253 icon: 'grid-columngrouping.gif',
254 desc: 'An extension that adds the capability of grouping Column headers in the GridPanel',
258 text: 'Multiple Sorting',
259 url: 'grid/multiple-sorting.html',
260 icon: 'grid-multiple-sorting.png',
261 desc: 'An example that shows multi-level sorting in a Grid Panel.',
268 url: 'tabs/tabs.html',
270 desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'
272 text: 'TabPanel Scroller Menu',
273 url: 'tabs/tab-scroller-menu.html',
274 icon: 'tab-panel-scroller-menu.gif',
275 desc: 'An example of an overflow menu that appears to the right of the TabPanel tab strip',
278 text: 'Advanced Tabs',
279 url: 'tabs/tabs-adv.html',
280 icon: 'tabs-adv.gif',
281 desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'
284 url: 'grouptabs/grouptabs.html',
285 icon: 'group-tabs.gif',
286 desc: 'A custom example on how to setup tab grouping using vertical tabs.',
293 url: 'chart/charts.html',
295 desc: 'A sampling of several chart styles',
299 url: 'chart/pie-chart.html',
300 icon: 'chart-pie.gif',
301 desc: 'An example of a pie chart',
304 text: 'Stacked Bar Chart',
305 url: 'chart/stacked-bar-chart.html',
306 icon: 'chart-stacked.gif',
307 desc: 'An example of a stacked bar chart',
310 text: 'Reloaded Chart',
311 url: 'chart/reload-chart.html',
312 icon: 'chart-reload.gif',
313 desc: 'An example demonstrating chart data reloading',
320 url: 'window/hello.html',
322 desc: 'Simple "Hello World" window that contains a basic TabPanel.'
325 url: 'message-box/msg-box.html',
327 desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'
329 text: 'Layout Window',
330 url: 'window/layout.html',
331 icon: 'window-layout.gif',
332 desc: 'A window containing a basic BorderLayout with nested TabPanel.'
337 text: 'Drag and Drop Reordering',
338 url: 'tree/reorder.html',
339 icon: 'tree-reorder.gif',
340 desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'
342 text: 'Multiple trees',
343 url: 'tree/two-trees.html',
344 icon: 'tree-two.gif',
345 desc: 'Drag and drop between two different sorted TreePanels.'
348 url: 'treegrid/treegrid.html',
349 icon: 'tree-columns.gif',
350 desc: 'The TreeGrid component',
354 url: 'tree/check-tree.html',
355 icon: 'tree-check.gif',
356 desc: 'An example showing simple checkbox selection in a tree.',
359 text: 'XML Tree Loader',
360 url: 'tree/xml-tree-loader.html',
361 icon: 'tree-xml-loader.gif',
362 desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'
365 title: 'Layout Managers',
367 text: 'Layout Browser',
368 url: 'layout-browser/layout-browser.html',
369 icon: 'layout-browser.gif',
370 desc: 'Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples.',
373 text: 'Border Layout',
374 url: 'layout/complex.html',
375 icon: 'border-layout.gif',
376 desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'
378 text: 'Accordion Layout',
379 url: 'layout/accordion.html',
380 icon: 'layout-accordion.gif',
381 desc: 'A basic accordion layout within a border layout.'
383 text: 'Absolute Layout (Form)',
384 url: 'form/absform.html',
385 icon: 'layout-absolute.gif',
386 desc: 'A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.'
388 text: 'Anchor Layout (Form)',
389 url: 'form/anchoring.html',
390 icon: 'layout-form.gif',
391 desc: 'A simple example of form fields utilizing an anchor layout in a window for flexible form resizing.'
393 text: 'Anchor Layout (Panel)',
394 url: 'layout/anchor.html',
395 icon: 'layout-anchor.gif',
396 desc: 'An example of Panels anchored in the browser window.'
398 text: 'Column Layout',
399 url: 'layout/column.html',
400 icon: 'layout-column.gif',
401 desc: 'An example of Panels managed by a column layout.'
403 text: 'Table Layout',
404 url: 'layout/table.html',
405 icon: 'layout-table.gif',
406 desc: 'An example of Panels managed by a table layout.'
409 url: 'layout/hbox.html',
410 icon: 'layout-column.gif',
411 desc: 'Interactive layout illustrating the capabilities of the HBox Layout.',
415 url: 'layout/vbox.html',
416 icon: 'layout-vbox.gif',
417 desc: 'Interactive layout illustrating the capabilities of the VBox Layout.',
421 url: 'portal/portal.html',
423 desc: 'A page layout using several custom extensions to provide a web portal interface.'
428 text: 'Basic ComboBox',
429 url: 'form/combos.html',
431 desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'
433 text: 'ComboBox Templates',
434 url: 'form/forum-search.html',
435 icon: 'combo-custom.gif',
436 desc: 'Customized combo with template-based list rendering, remote loading and paging.'
441 text: 'Dynamic Forms',
442 url: 'form/dynamic.html',
443 icon: 'form-dynamic.gif',
444 desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'
446 text: 'Ajax with XML Forms',
447 url: 'form/xml-form.html',
448 icon: 'form-xml.gif',
449 desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'
451 text: 'Custom Search Fields',
452 url: 'form/custom.html',
453 icon: 'form-custom.gif',
454 desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'
456 text: 'Binding a Grid to a Form',
457 url: 'form/form-grid.html',
458 icon: 'form-grid-binding.gif',
459 desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'
461 text: 'Advanced Validation',
462 url: 'form/adv-vtypes.html',
463 icon: 'form-adv-vtypes.gif',
464 desc: 'Relational form field validation using custom vtypes.'
466 text: 'Checkbox/Radio Groups',
467 url: 'form/check-radio.html',
468 icon: 'form-check-radio.gif',
469 desc: 'Many examples showing different checkbox and radio group configurations.'
471 text: 'File Upload Field',
472 url: 'form/file-upload.html',
473 icon: 'form-file-upload.gif',
474 desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'
476 text: 'Spinner Field',
477 url: 'spinner/spinner.html',
478 icon: 'form-spinner.gif',
479 desc: 'An example of a custom spinner widget.'
481 text: 'MultiSelect and ItemSelector',
482 url: 'multiselect/multiselect-demo.html',
483 icon: 'form-multiselect.gif',
484 desc: 'Example controls for selecting a list of items in forms.'
487 text: 'Slider Field',
488 url: 'slider/slider-field.html',
489 icon: 'form-slider.png',
490 desc: 'Example usage of an Ext.Slider to select a number value in a form.',
494 text: 'Forms with vBox layout',
495 url: 'form/vbox-form.html',
496 icon: 'form-vbox.gif',
497 desc: 'Example usage of the vBox layout with forms. An added bonus is the FieldReplicator plugin.',
501 text : 'Composite Fields',
502 url : 'form/composite-field.html',
503 icon : 'form-composite.png',
504 desc : 'Example usage of the Composite Fields to place several fields on a single form row.',
508 title: 'Toolbars and Menus',
510 text: 'Basic Toolbar',
511 url: 'menu/menus.html',
513 desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.',
516 text: 'Toolbar Overflow',
517 url: 'toolbar/overflow.html',
518 icon: 'toolbar-overflow.gif',
519 desc: 'Dynamic overflow of toolbar buttons into an Ext.menu.',
522 text: 'Toolbar Button Groups',
523 url: 'toolbar/toolbars.html',
524 icon: 'toolbar-button-groups.gif',
525 desc: 'Group buttons together in the toolbar.',
529 url: 'menu/actions.html',
530 icon: 'toolbar-actions.gif',
531 desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'
534 text: 'Reorderable Toolbar',
535 url: 'toolbar/reorderable.html',
536 icon: 'toolbar-reorderable.png',
537 desc: 'Items within a toolbar can be reordered using this plugin.',
541 text: 'Droppable Toolbar',
542 url: 'toolbar/droppable.html',
543 icon: 'toolbar-droppable.png',
544 desc: 'Items can be dropped onto a Toolbar and easily turned into items with this plugin.',
549 url: 'statusbar/statusbar-demo.html',
550 icon: 'statusbar-demo.gif',
551 desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.',
554 text: 'Status Bar (Advanced)',
555 url: 'statusbar/statusbar-advanced.html',
556 icon: 'statusbar-adv.gif',
557 desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.',
561 title: 'Templates and DataView',
564 url : 'core/templates.html',
565 icon : 'templates.gif',
566 desc : 'A simple example of rendering views from templates bound to data objects.'
569 url : 'view/data-view.html',
570 icon : 'data-view.gif',
571 desc : 'A basic DataView with custom plugins for editable labels and drag selection of items.'
573 text : 'DataView (advanced)',
574 url : 'view/chooser.html',
575 icon : 'chooser.gif',
576 desc : 'A more customized DataView supporting sorting and filtering with multiple templates.'
579 url : 'view/list-view.html',
580 icon : 'list-view.gif',
581 desc : 'A high performance tabular DataView to be used as a lightweight grid.',
585 text : 'Animated DataView',
586 url : 'view/animated-dataview.html',
587 icon : 'animated-dataview.png',
588 desc : 'Transition animation plugin applied to a standard DataView',
592 text : 'Multi-sort DataView',
593 url : 'view/multisort-dataview.html',
594 icon : 'multisort-dataview.png',
595 desc : 'Example demonstrating the ability to sort a DataView by multiple sorters.',
599 title : 'Drag and Drop',
601 text : 'Grid to Grid Drag and Drop',
602 url : 'dd/dnd_grid_to_grid.html',
603 icon : 'dd-gridtogrid.gif',
604 desc : 'A simple drag and drop from grid to grid implementation.'
606 text : 'Grid to FormPanel Drag and Drop',
607 url : 'dd/dnd_grid_to_formpanel.html',
608 icon : 'dd-gridtoformpanel.gif',
609 desc : 'A basic drag and drop from grid to formpanel.'
611 text : 'Field to Grid Drag and Drop',
612 url : 'dd/field-to-grid-dd.html',
613 icon : 'dd-fieldtogrid.gif',
614 desc : 'Drag from a form field and drop on a grid.',
617 text : 'Custom Drag and Drop',
618 url : 'dd/dragdropzones.html',
619 icon : 'dd-zones.gif',
620 desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'
626 url: 'direct/direct.php',
628 desc: 'An example demonstrating Remoting and Polling the server',
632 url: 'direct/direct-form.php',
634 desc: 'Ext.Direct Remoting with a Form',
637 text: 'Direct TreeLoader',
638 url: 'direct/direct-tree.php',
640 desc: 'Ext.Direct Remoting with a Tree',
644 title: 'Miscellaneous',
647 url: 'history/history.html',
649 desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'
652 url: 'window/gmap.html',
653 icon: 'gmap-panel.gif',
654 desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'
657 url: 'simple-widgets/editor.html',
659 desc: 'An example demonstrating the ease of use of the Ext.editor class to modify DOM elements',
663 url: 'slider/slider.html',
665 desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and multiple thumbs.',
669 url: 'simple-widgets/qtips.html',
671 desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.',
674 text: 'Progress Bar',
675 url: 'simple-widgets/progress-bar.html',
676 icon: 'progress.gif',
677 desc: 'A basic progress bar component shown in various configurations and with custom styles.'
680 url: 'panel/panels.html',
682 desc: 'A basic collapsible panel example.',
685 text: 'Bubble Panel',
686 url: 'panel/bubble-panel.html',
687 icon: 'panel-bubble.gif',
688 desc: 'An example illustrating customization of a standard panel.',
692 url: 'resizable/basic.html',
693 icon: 'resizable.gif',
694 desc: 'Examples of making any element resizable with various configuration options.'
697 url: 'core/spotlight.html',
698 icon: 'spotlight.gif',
699 desc: 'A utility for masking everything except a single element on the page to visually highlight it.',
703 url: 'button/buttons.html',
708 text: 'Debugging Console',
709 url: 'debug/debug-console.html',
710 icon: 'debug-console.gif',
714 text: 'Localization (static)',
715 url: 'locale/dutch-form.html',
716 icon: 'locale-dutch.gif',
717 desc: 'Demonstrates fully localizing a form by including a custom locale script.'
719 text: 'Localization (dynamic)',
720 url: 'locale/multi-lang.html',
721 icon: 'locale-switch.gif',
722 desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'