+++ /dev/null
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-SamplePanel = Ext.extend(Ext.DataView, {\r
- autoHeight: true,\r
- frame:true,\r
- cls:'demos',\r
- itemSelector: 'dd',\r
- overClass: 'over',\r
- \r
- tpl : new Ext.XTemplate(\r
- '<div id="sample-ct">',\r
- '<tpl for=".">',\r
- '<div><a name="{id}"></a><h2><div>{title}</div></h2>',\r
- '<dl>',\r
- '<tpl for="samples">',\r
- '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',\r
- '<div><h4>{text}</h4><p>{desc}</p></div>',\r
- '</dd>',\r
- '</tpl>',\r
- '<div style="clear:left"></div></dl></div>',\r
- '</tpl>',\r
- '</div>'\r
- ),\r
-\r
- onClick : function(e){\r
- var group = e.getTarget('h2', 3, true);\r
- if(group){\r
- group.up('div').toggleClass('collapsed');\r
- }else {\r
- var t = e.getTarget('dd', 5, true);\r
- if(t && !e.getTarget('a', 2)){\r
- var url = t.getAttributeNS('ext', 'url');\r
- window.open(url);\r
- }\r
- }\r
- return SamplePanel.superclass.onClick.apply(this, arguments);\r
- }\r
-});\r
-\r
-\r
-Ext.EventManager.on(window, 'load', function(){\r
-\r
- var catalog = [{\r
- title: 'Combination Samples',\r
- samples: [{\r
- text: 'Feed Viewer 2.0',\r
- url: 'feed-viewer/view.html',\r
- icon: 'feeds.gif',\r
- desc: 'RSS 2.0 feed reader sample application that features a swappable reader panel layout.'\r
- },{\r
- text: 'Simple Tasks 2.0',\r
- url: 'http://extjs.com/blog/2008/02/24/tasks2/',\r
- icon: 'air.gif',\r
- desc: 'Complete personal task management application sample that runs on <a href="http://labs.adobe.com/technologies/air/" target="_blank">Adobe AIR</a>.'\r
- },{\r
- text: 'Simple Tasks',\r
- url: 'tasks/tasks.html',\r
- icon: 'tasks.gif',\r
- desc: 'Personal task management application sample that uses <a href="http://gears.google.com" target="_blank">Google Gears</a> for data storage.'\r
- },{\r
- text: 'Image Organizer',\r
- url: 'organizer/organizer.html',\r
- icon: 'organizer.gif',\r
- desc: 'DataView and TreePanel sample that demonstrates dragging data items from a DataView into a TreePanel.'\r
- },{\r
- text: 'Web Desktop',\r
- url: 'desktop/desktop.html',\r
- icon: 'desktop.gif',\r
- desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.'\r
- }]\r
- },{\r
- title: 'Grids',\r
- samples: [{\r
- text: 'Basic Array Grid',\r
- url: 'grid/array-grid.html',\r
- icon: 'grid-array.gif',\r
- desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'\r
- },{\r
- text: 'Editable Grid',\r
- url: 'grid/edit-grid.html',\r
- icon: 'grid-edit.gif',\r
- desc: 'An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.'\r
- },{\r
- text: 'XML Grid',\r
- url: 'grid/xml-grid.html',\r
- icon: 'grid-xml.gif',\r
- desc: 'A simple read-only grid loaded from XML data.'\r
- },{\r
- text: 'Paging',\r
- url: 'grid/paging.html',\r
- icon: 'grid-paging.gif',\r
- desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'\r
- },{\r
- text: 'Grouping',\r
- url: 'grid/grouping.html',\r
- icon: 'grid-grouping.gif',\r
- desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'\r
- },{\r
- text: 'Live Group Summary',\r
- url: 'grid/totals.html',\r
- icon: 'grid-summary.gif',\r
- desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'\r
- },{\r
- text: 'Grid Plugins',\r
- url: 'grid/grid3.html',\r
- icon: 'grid-plugins.gif',\r
- desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'\r
- },{\r
- text: 'Grid Filtering',\r
- url: 'grid-filtering/grid-filter.html',\r
- icon: 'grid-filter.gif',\r
- desc: 'Grid plugins providing custom data filtering menus that support various data types.'\r
- },{\r
- text: 'Grid From Markup',\r
- url: 'grid/from-markup.html',\r
- icon: 'grid-from-markup.gif',\r
- desc: 'Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.'\r
- },{\r
- text: 'Grid Data Binding (basic)',\r
- url: 'grid/binding.html',\r
- icon: 'grid-data-binding.gif',\r
- desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'\r
- },{\r
- text: 'Grid Data Binding (advanced)',\r
- url: 'grid/binding-with-classes.html',\r
- icon: 'grid-data-binding.gif',\r
- desc: 'Refactoring the basic data binding example to use a class-based application design model.'\r
- }]\r
- },{\r
- title: 'Tabs',\r
- samples: [{\r
- text: 'Basic Tabs',\r
- url: 'tabs/tabs.html',\r
- icon: 'tabs.gif',\r
- desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'\r
- },{\r
- text: 'Advanced Tabs',\r
- url: 'tabs/tabs-adv.html',\r
- icon: 'tabs-adv.gif',\r
- desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'\r
- }]\r
- },{\r
- title: 'Windows',\r
- samples: [{\r
- text: 'Hello World',\r
- url: 'window/hello.html',\r
- icon: 'window.gif',\r
- desc: 'Simple "Hello World" window that contains a basic TabPanel.'\r
- },{\r
- text: 'MessageBox',\r
- url: 'message-box/msg-box.html',\r
- icon: 'msg-box.gif',\r
- desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'\r
- },{\r
- text: 'Layout Window',\r
- url: 'window/layout.html',\r
- icon: 'window-layout.gif',\r
- desc: 'A window containing a basic BorderLayout with nested TabPanel.'\r
- }]\r
- },{\r
- title: 'Trees',\r
- samples: [{\r
- text: 'Drag and Drop Reordering',\r
- url: 'tree/reorder.html',\r
- icon: 'tree-reorder.gif',\r
- desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'\r
- },{\r
- text: 'Multiple trees',\r
- url: 'tree/two-trees.html',\r
- icon: 'tree-two.gif',\r
- desc: 'Drag and drop between two different sorted TreePanels.'\r
- },{\r
- text: 'Column Tree',\r
- url: 'tree/column-tree.html',\r
- icon: 'tree-columns.gif',\r
- desc: 'A custom TreePanel implementation that demonstrates extending an existing component.'\r
- },{\r
- text: 'XML Tree Loader',\r
- url: 'tree/xml-tree-loader.html',\r
- icon: 'tree-xml-loader.gif',\r
- desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'\r
- }]\r
- },{\r
- title: 'Layout Managers',\r
- samples: [{\r
- text: 'Layout Browser',\r
- url: 'layout-browser/layout-browser.html',\r
- icon: 'layout-browser.gif',\r
- desc: 'Includes examples for each standard Ext layout, several custom layouts and combination examples.'\r
- },{\r
- text: 'Border Layout',\r
- url: 'layout/complex.html',\r
- icon: 'border-layout.gif',\r
- desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'\r
- },{\r
- text: 'Anchor Layout',\r
- url: 'form/anchoring.html',\r
- icon: 'anchor.gif',\r
- desc: 'A simple example of anchoring form fields to a window for flexible form resizing.'\r
- },{\r
- text: 'Portal Demo',\r
- url: 'portal/portal.html',\r
- icon: 'portal.gif',\r
- desc: 'A page layout using several custom extensions to provide a web portal interface.'\r
- }]\r
- },{\r
- title: 'ComboBox',\r
- samples: [{\r
- text: 'Basic ComboBox',\r
- url: 'form/combos.html',\r
- icon: 'combo.gif',\r
- desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'\r
- },{\r
- text: 'ComboBox Templates',\r
- url: 'form/forum-search.html',\r
- icon: 'combo-custom.gif',\r
- desc: 'Customized combo with template-based list rendering, remote loading and paging.'\r
- }]\r
- },{\r
- title: 'Forms',\r
- samples: [{\r
- text: 'Dynamic Forms',\r
- url: 'form/dynamic.html',\r
- icon: 'form-dynamic.gif',\r
- desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'\r
- },{\r
- text: 'Ajax with XML Forms',\r
- url: 'form/xml-form.html',\r
- icon: 'form-xml.gif',\r
- desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'\r
- },{\r
- text: 'Custom Search Field',\r
- url: 'form/custom.html',\r
- icon: 'form-custom.gif',\r
- desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'\r
- },{\r
- text: 'Binding a Grid to a Form',\r
- url: 'form/form-grid.html',\r
- icon: 'form-grid-binding.gif',\r
- desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'\r
- },{\r
- text: 'Advanced Validation',\r
- url: 'form/adv-vtypes.html',\r
- icon: 'form-adv-vtypes.gif',\r
- desc: 'Relational form field validation using custom vtypes.'\r
- },{\r
- text: 'Checkbox/Radio Groups',\r
- url: 'form/check-radio.html',\r
- icon: 'form-check-radio.gif',\r
- desc: 'Many examples showing different checkbox and radio group configurations.'\r
- },{\r
- text: 'File Upload Field',\r
- url: 'form/file-upload.html',\r
- icon: 'form-file-upload.gif',\r
- desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'\r
- },{\r
- text: 'MultiSelect and ItemSelector',\r
- url: 'multiselect/multiselect-demo.html',\r
- icon: 'form-multiselect.gif',\r
- desc: 'Example controls for selecting a list of items in forms.'\r
- }]\r
- },{\r
- title: 'Toolbars and Menus',\r
- samples: [{\r
- text: 'Basic Toolbar',\r
- url: 'menu/menus.html',\r
- icon: 'toolbar.gif',\r
- desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.'\r
- },{\r
- text: 'Ext Actions',\r
- url: 'menu/actions.html',\r
- icon: 'toolbar-actions.gif',\r
- desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'\r
- }]\r
- },{\r
- title: 'Templates and DataView',\r
- samples: [{\r
- text: 'Templates',\r
- url: 'core/templates.html',\r
- icon: 'templates.gif',\r
- desc: 'A simple example of rendering views from templates bound to data objects.'\r
- },{\r
- text: 'DataView',\r
- url: 'view/data-view.html',\r
- icon: 'data-view.gif',\r
- desc: 'A basic DataView with custom plugins for editable labels and drag selection of items.'\r
- },{\r
- text: 'DataView (advanced)',\r
- url: 'view/chooser.html',\r
- icon: 'chooser.gif',\r
- desc: 'A more customized DataView supporting sorting and filtering with multiple templates.'\r
- }]\r
- },{\r
- title : 'Drag and Drop',\r
- samples : [{\r
- text : 'Grid to Grid Drag and Drop',\r
- url : 'dd/dnd_grid_to_grid.html',\r
- icon : 'dd-gridtogrid.gif',\r
- desc : 'A simple drag and drop from grid to grid implementation.'\r
- },{\r
- text : 'Grid to FormPanel Drag and Drop',\r
- url : 'dd/dnd_grid_to_formpanel.html',\r
- icon : 'dd-gridtoformpanel.gif',\r
- desc : 'A basic drag and drop from grid to formpanel.'\r
- },{\r
- text : 'Custom Drag and Drop',\r
- url : 'dd/dragdropzones.html',\r
- icon : 'dd-zones.gif',\r
- desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'\r
- }]\r
- },{\r
- title: 'Miscellaneous',\r
- samples: [{\r
- text: 'History',\r
- url: 'history/history.html',\r
- icon: 'history.gif',\r
- desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'\r
- },{\r
- text: 'Google Maps',\r
- url: 'window/gmap.html',\r
- icon: 'gmap-panel.gif',\r
- desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'\r
- },{\r
- text: 'StatusBar',\r
- url: 'statusbar/statusbar-demo.html',\r
- icon: 'statusbar.gif',\r
- desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.'\r
- },{\r
- text: 'StatusBar (advanced)',\r
- url: 'statusbar/statusbar-advanced.html',\r
- icon: 'statusbar-plugin.gif',\r
- desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.'\r
- },{\r
- text: 'Slider',\r
- url: 'slider/slider.html',\r
- icon: 'slider.gif',\r
- desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and more.'\r
- },{\r
- text: 'QuickTips',\r
- url: 'simple-widgets/qtips.html',\r
- icon: 'qtips.gif',\r
- desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.'\r
- },{\r
- text: 'Progress Bar',\r
- url: 'simple-widgets/progress-bar.html',\r
- icon: 'progress.gif',\r
- desc: 'A basic progress bar component shown in various configurations and with custom styles.'\r
- },{\r
- text: 'Panels',\r
- url: 'panel/panels.html',\r
- icon: 'panel.gif',\r
- desc: 'A basic collapsible panel example.'\r
- },{\r
- text: 'Resizable',\r
- url: 'resizable/basic.html',\r
- icon: 'resizable.gif',\r
- desc: 'Examples of making any element resizable with various configuration options.'\r
- },{\r
- text: 'Spotlight',\r
- url: 'core/spotlight.html',\r
- icon: 'spotlight.gif',\r
- desc: 'A utility for masking everything except a single element on the page to visually highlight it.'\r
- },{\r
- text: 'Localization (static)',\r
- url: 'locale/dutch-form.html',\r
- icon: 'locale-dutch.gif',\r
- desc: 'Demonstrates fully localizing a form by including a custom locale script.'\r
- },{\r
- text: 'Localization (dynamic)',\r
- url: 'locale/multi-lang.html',\r
- icon: 'locale-switch.gif',\r
- desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'\r
- }]\r
- }];\r
-\r
- for(var i = 0, c; c = catalog[i]; i++){\r
- c.id = 'sample-' + i;\r
- }\r
-\r
- var store = new Ext.data.JsonStore({\r
- idProperty: 'id',\r
- fields: ['id', 'title', 'samples'],\r
- data: catalog\r
- });\r
-\r
- new Ext.Panel({\r
- autoHeight: true,\r
- collapsible: true,\r
- frame: true,\r
- title: 'View Samples',\r
- items: new SamplePanel({\r
- store: store\r
- })\r
- }).render('all-demos');\r
-\r
- var tpl = new Ext.XTemplate(\r
- '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'\r
- );\r
- tpl.overwrite('sample-menu', catalog);\r
-\r
- Ext.select('#sample-spacer').remove();\r
-\r
- setTimeout(function(){\r
- Ext.get('loading').remove();\r
- Ext.fly('loading-mask').fadeOut({\r
- remove:true,\r
- callback : function() {\r
- var cp = new Ext.state.CookieProvider();\r
-\r
- if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){\r
- var tpl = new Ext.Template(\r
- '<div style="border: 1px solid #FF0000; background-color:#FFAAAA; display:none; padding:15px; color:#000000;"><b>Warning: </b> Firebug is known to cause performance issues with Ext JS. <a href="#" id="hideWarning">[ Hide ]</a></div>' \r
- );\r
- var newEl = tpl.insertFirst('all-demos');\r
- \r
- Ext.fly('hideWarning').on('click', function() {\r
- Ext.fly(newEl).slideOut('t',{remove:true});\r
- cp.set('hideFBWarning', true); \r
- });\r
- Ext.fly(newEl).slideIn();\r
- }\r
- \r
- \r
- }\r
- \r
- \r
- });\r
- }, 250);\r
-\r
-});
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff