- 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.'
- }]
-}];
+ 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: 'DataView',
+ samples: [{
+ text : 'DataView',
+ url: 'view/data-view.html',
+ icon : '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 : 'animated-dataview.png',
+ desc : 'Transition animation plugin applied to a standard DataView'
+ },
+ {
+ text : 'Multi-sort DataView',
+ url: 'view/multisort/multisort.html',
+ icon : 'multisort-dataview.png',
+ desc : 'Example demonstrating the ability to sort a DataView by multiple sorters.'
+ },
+ {
+ text : 'Advanced DataView',
+ url: 'view/chooser/chooser.html',
+ icon : 'advanced-dataview.png',
+ desc : 'DataView which allows you to filter and sort images.'
+ }
+ ]
+ },
+ {
+ 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: 'Contact Us Form',
+ url: 'form/contact-form.html',
+ icon: '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: '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.',
+ status: 'updated'
+ },
+ {
+ text: 'Field Types',
+ url: 'form/field-types.html',
+ icon: '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: '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: '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.',
+ status: 'updated'
+ },
+ {
+ text: 'Number Field',
+ url: 'form/number.html',
+ icon: '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: 'form-multiselect.gif',
+ desc: 'Example controls for selecting a list of items in forms.',
+ status: 'updated'
+ },
+ {
+ text: 'Registration Form',
+ url: 'form/registration.html',
+ icon: '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: 'form-checkout.gif',
+ desc: 'An example of a common shopping cart checkout form.',
+ status : 'new'
+ },
+ {
+ 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.'
+ },
+ {
+ 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: 'Forms with hBox layout',
+ url: 'form/hbox-form.html',
+ icon: '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 : '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: '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: 'form-custom.gif',
+ desc: 'A simple example that demonstrate how to create a custom form field.',
+ status: 'new'
+ }
+ ]
+ },
+ {
+ title: 'Direct',
+ samples: [
+ {
+ text: 'Direct',
+ url: 'direct/direct.html',
+ icon: 'direct.gif',
+ desc: 'An example demonstrating Remoting and Polling the server'
+ },
+ {
+ text: 'Direct Form',
+ url: 'direct/direct-form.html',
+ icon: 'direct.gif',
+ desc: 'Ext.Direct Remoting with a Form'
+ },
+ {
+ text: 'Direct Grid',
+ url: 'direct/direct-grid.html',
+ icon: 'direct.gif',
+ desc: 'Ext.Direct Remoting with a Grid'
+ },
+ {
+ text: 'Direct TreeLoader',
+ url: 'direct/direct-tree.html',
+ icon: 'direct.gif',
+ desc: 'Ext.Direct Remoting with a Tree',
+ status: 'new'
+ },
+ {
+ text: 'Direct Named Arguments',
+ url: 'direct/named-arguments.html',
+ icon: 'direct.gif',
+ desc: 'Ext.Direct Named Arguments',
+ status: 'new'
+ }
+ ]
+ },
+ {
+ title: 'MVC',
+ samples: [
+ {
+ text: 'Feed Viewer',
+ url: 'app/feed-viewer/feed-viewer.html',
+ icon: '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: 'nested-loading.gif',
+ desc: 'An MVC example that shows simple navigation and nested loading with the data package',
+ 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'
+ },
+ {
+ 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: 'qtips/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/panel.html',
+ icon: 'panel.gif',
+ desc: 'A basic collapsible panel example.',
+ status: 'updated'
+ },
+ {
+ text: 'Resizable',
+ url: 'resizer/basic.html',
+ icon: 'resizable.gif',
+ desc: 'Examples of making any element resizable with various configuration options.'
+ },
+ {
+ text: 'Buttons',
+ url: 'button/button.html',
+ icon: 'buttons.gif',
+ desc: 'Shows buttons in many of their possible configurations'
+ },
+ {
+ 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.'
+ },
+ {
+ text: 'Keyboard Navigation',
+ url: 'keynav/keynav.html',
+ icon: 'keyboard.gif',
+ desc: 'Shows a custom keyboard navigation using the KeyNav class',
+ 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.'
+ },
+ {
+ text: 'Browser State Management',
+ url: 'state/state.html',
+ icon: 'state-saving.gif',
+ desc: "An example of storing your application's state.",
+ status: 'new'
+ },
+ {
+ text: 'Basic Templating',
+ url: 'platform/templates.html',
+ icon: 'templates.gif',
+ desc: "A basic templating example."
+ },
+ {
+ text: 'Bubble Panel',
+ url: 'panel/bubble-panel/bubble-panel.html',
+ icon: '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'
+ }
+ ]
+ }
+];
+