examples/samples.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 SamplePanel = Ext.extend(Ext.DataView, {\r
  10     autoHeight: true,\r
  11     frame:true,\r
  12     cls:'demos',\r
  13     itemSelector: 'dd',\r
  14     overClass: 'over',\r
  15     \r
  16     tpl : new Ext.XTemplate(\r
  17         '<div id="sample-ct">',\r
  18             '<tpl for=".">',\r
  19             '<div><a name="{id}"></a><h2><div>{title}</div></h2>',\r
  20             '<dl>',\r
  21                 '<tpl for="samples">',\r
  22                     '<dd ext:url="{url}"><img src="shared/screens/{icon}"/>',\r
  23                         '<div><h4>{text}</h4><p>{desc}</p></div>',\r
  24                     '</dd>',\r
  25                 '</tpl>',\r
  26             '<div style="clear:left"></div></dl></div>',\r
  27             '</tpl>',\r
  28         '</div>'\r
  29     ),\r
  30 \r
  31     onClick : function(e){\r
  32         var group = e.getTarget('h2', 3, true);\r
  33         if(group){\r
  34             group.up('div').toggleClass('collapsed');\r
  35         }else {\r
  36             var t = e.getTarget('dd', 5, true);\r
  37             if(t && !e.getTarget('a', 2)){\r
  38                 var url = t.getAttributeNS('ext', 'url');\r
  39                 window.open(url);\r
  40             }\r
  41         }\r
  42         return SamplePanel.superclass.onClick.apply(this, arguments);\r
  43     }\r
  44 });\r
  45 \r
  46 \r
  47 Ext.EventManager.on(window, 'load', function(){\r
  48 \r
  49     var catalog = [{\r
  50         title: 'Combination Samples',\r
  51         samples: [{\r
  52             text: 'Feed Viewer 2.0',\r
  53             url: 'feed-viewer/view.html',\r
  54             icon: 'feeds.gif',\r
  55             desc: 'RSS 2.0 feed reader sample application that features a swappable reader panel layout.'\r
  56         },{\r
  57             text: 'Simple Tasks 2.0',\r
  58             url: 'http://extjs.com/blog/2008/02/24/tasks2/',\r
  59             icon: 'air.gif',\r
  60             desc: 'Complete personal task management application sample that runs on <a href="http://labs.adobe.com/technologies/air/" target="_blank">Adobe AIR</a>.'\r
  61         },{\r
  62             text: 'Simple Tasks',\r
  63             url: 'tasks/tasks.html',\r
  64             icon: 'tasks.gif',\r
  65             desc: 'Personal task management application sample that uses <a href="http://gears.google.com" target="_blank">Google Gears</a> for data storage.'\r
  66         },{\r
  67             text: 'Image Organizer',\r
  68             url: 'organizer/organizer.html',\r
  69             icon: 'organizer.gif',\r
  70             desc: 'DataView and TreePanel sample that demonstrates dragging data items from a DataView into a TreePanel.'\r
  71         },{\r
  72             text: 'Web Desktop',\r
  73             url: 'desktop/desktop.html',\r
  74             icon: 'desktop.gif',\r
  75             desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.'\r
  76         }]\r
  77     },{\r
  78         title: 'Grids',\r
  79         samples: [{\r
  80             text: 'Basic Array Grid',\r
  81             url: 'grid/array-grid.html',\r
  82             icon: 'grid-array.gif',\r
  83             desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.'\r
  84         },{\r
  85             text: 'Editable Grid',\r
  86             url: 'grid/edit-grid.html',\r
  87             icon: 'grid-edit.gif',\r
  88             desc: 'An editable grid loaded from XML that shows multiple types of grid editors as well as defining custom data records.'\r
  89         },{\r
  90             text: 'XML Grid',\r
  91             url: 'grid/xml-grid.html',\r
  92             icon: 'grid-xml.gif',\r
  93             desc: 'A simple read-only grid loaded from XML data.'\r
  94         },{\r
  95             text: 'Paging',\r
  96             url: 'grid/paging.html',\r
  97             icon: 'grid-paging.gif',\r
  98             desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'\r
  99         },{\r
 100             text: 'Grouping',\r
 101             url: 'grid/grouping.html',\r
 102             icon: 'grid-grouping.gif',\r
 103             desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'\r
 104         },{\r
 105             text: 'Live Group Summary',\r
 106             url: 'grid/totals.html',\r
 107             icon: 'grid-summary.gif',\r
 108             desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.'\r
 109         },{\r
 110             text: 'Grid Plugins',\r
 111             url: 'grid/grid3.html',\r
 112             icon: 'grid-plugins.gif',\r
 113             desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'\r
 114         },{\r
 115             text: 'Grid Filtering',\r
 116             url: 'grid-filtering/grid-filter.html',\r
 117             icon: 'grid-filter.gif',\r
 118             desc: 'Grid plugins providing custom data filtering menus that support various data types.'\r
 119         },{\r
 120             text: 'Grid From Markup',\r
 121             url: 'grid/from-markup.html',\r
 122             icon: 'grid-from-markup.gif',\r
 123             desc: 'Custom GridPanel extension that can convert a plain HTML table into a dynamic grid at runtime.'\r
 124         },{\r
 125             text: 'Grid Data Binding (basic)',\r
 126             url: 'grid/binding.html',\r
 127             icon: 'grid-data-binding.gif',\r
 128             desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'\r
 129         },{\r
 130             text: 'Grid Data Binding (advanced)',\r
 131             url: 'grid/binding-with-classes.html',\r
 132             icon: 'grid-data-binding.gif',\r
 133             desc: 'Refactoring the basic data binding example to use a class-based application design model.'\r
 134         }]\r
 135     },{\r
 136         title: 'Tabs',\r
 137         samples: [{\r
 138             text: 'Basic Tabs',\r
 139             url: 'tabs/tabs.html',\r
 140             icon: 'tabs.gif',\r
 141             desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'\r
 142         },{\r
 143             text: 'Advanced Tabs',\r
 144             url: 'tabs/tabs-adv.html',\r
 145             icon: 'tabs-adv.gif',\r
 146             desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'\r
 147         }]\r
 148     },{\r
 149         title: 'Windows',\r
 150         samples: [{\r
 151             text: 'Hello World',\r
 152             url: 'window/hello.html',\r
 153             icon: 'window.gif',\r
 154             desc: 'Simple "Hello World" window that contains a basic TabPanel.'\r
 155         },{\r
 156             text: 'MessageBox',\r
 157             url: 'message-box/msg-box.html',\r
 158             icon: 'msg-box.gif',\r
 159             desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'\r
 160         },{\r
 161             text: 'Layout Window',\r
 162             url: 'window/layout.html',\r
 163             icon: 'window-layout.gif',\r
 164             desc: 'A window containing a basic BorderLayout with nested TabPanel.'\r
 165         }]\r
 166     },{\r
 167         title: 'Trees',\r
 168         samples: [{\r
 169             text: 'Drag and Drop Reordering',\r
 170             url: 'tree/reorder.html',\r
 171             icon: 'tree-reorder.gif',\r
 172             desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'\r
 173         },{\r
 174             text: 'Multiple trees',\r
 175             url: 'tree/two-trees.html',\r
 176             icon: 'tree-two.gif',\r
 177             desc: 'Drag and drop between two different sorted TreePanels.'\r
 178         },{\r
 179             text: 'Column Tree',\r
 180             url: 'tree/column-tree.html',\r
 181             icon: 'tree-columns.gif',\r
 182             desc: 'A custom TreePanel implementation that demonstrates extending an existing component.'\r
 183         },{\r
 184             text: 'XML Tree Loader',\r
 185             url: 'tree/xml-tree-loader.html',\r
 186             icon: 'tree-xml-loader.gif',\r
 187             desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'\r
 188         }]\r
 189     },{\r
 190         title: 'Layout Managers',\r
 191         samples: [{\r
 192             text: 'Layout Browser',\r
 193             url: 'layout-browser/layout-browser.html',\r
 194             icon: 'layout-browser.gif',\r
 195             desc: 'Includes examples for each standard Ext layout, several custom layouts and combination examples.'\r
 196         },{\r
 197             text: 'Border Layout',\r
 198             url: 'layout/complex.html',\r
 199             icon: 'border-layout.gif',\r
 200             desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.'\r
 201         },{\r
 202             text: 'Anchor Layout',\r
 203             url: 'form/anchoring.html',\r
 204             icon: 'anchor.gif',\r
 205             desc: 'A simple example of anchoring form fields to a window for flexible form resizing.'\r
 206         },{\r
 207             text: 'Portal Demo',\r
 208             url: 'portal/portal.html',\r
 209             icon: 'portal.gif',\r
 210             desc: 'A page layout using several custom extensions to provide a web portal interface.'\r
 211         }]\r
 212     },{\r
 213         title: 'ComboBox',\r
 214         samples: [{\r
 215             text: 'Basic ComboBox',\r
 216             url: 'form/combos.html',\r
 217             icon: 'combo.gif',\r
 218             desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'\r
 219         },{\r
 220             text: 'ComboBox Templates',\r
 221             url: 'form/forum-search.html',\r
 222             icon: 'combo-custom.gif',\r
 223             desc: 'Customized combo with template-based list rendering, remote loading and paging.'\r
 224         }]\r
 225     },{\r
 226         title: 'Forms',\r
 227         samples: [{\r
 228             text: 'Dynamic Forms',\r
 229             url: 'form/dynamic.html',\r
 230             icon: 'form-dynamic.gif',\r
 231             desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'\r
 232         },{\r
 233             text: 'Ajax with XML Forms',\r
 234             url: 'form/xml-form.html',\r
 235             icon: 'form-xml.gif',\r
 236             desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'\r
 237         },{\r
 238             text: 'Custom Search Field',\r
 239             url: 'form/custom.html',\r
 240             icon: 'form-custom.gif',\r
 241             desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'\r
 242         },{\r
 243             text: 'Binding a Grid to a Form',\r
 244             url: 'form/form-grid.html',\r
 245             icon: 'form-grid-binding.gif',\r
 246             desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.'\r
 247         },{\r
 248             text: 'Advanced Validation',\r
 249             url: 'form/adv-vtypes.html',\r
 250             icon: 'form-adv-vtypes.gif',\r
 251             desc: 'Relational form field validation using custom vtypes.'\r
 252         },{\r
 253             text: 'Checkbox/Radio Groups',\r
 254             url: 'form/check-radio.html',\r
 255             icon: 'form-check-radio.gif',\r
 256             desc: 'Many examples showing different checkbox and radio group configurations.'\r
 257         },{\r
 258             text: 'File Upload Field',\r
 259             url: 'form/file-upload.html',\r
 260             icon: 'form-file-upload.gif',\r
 261             desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.'\r
 262         },{\r
 263             text: 'MultiSelect and ItemSelector',\r
 264             url: 'multiselect/multiselect-demo.html',\r
 265             icon: 'form-multiselect.gif',\r
 266             desc: 'Example controls for selecting a list of items in forms.'\r
 267         }]\r
 268     },{\r
 269         title: 'Toolbars and Menus',\r
 270         samples: [{\r
 271             text: 'Basic Toolbar',\r
 272             url: 'menu/menus.html',\r
 273             icon: 'toolbar.gif',\r
 274             desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.'\r
 275         },{\r
 276             text: 'Ext Actions',\r
 277             url: 'menu/actions.html',\r
 278             icon: 'toolbar-actions.gif',\r
 279             desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'\r
 280         }]\r
 281     },{\r
 282         title: 'Templates and DataView',\r
 283         samples: [{\r
 284             text: 'Templates',\r
 285             url: 'core/templates.html',\r
 286             icon: 'templates.gif',\r
 287             desc: 'A simple example of rendering views from templates bound to data objects.'\r
 288         },{\r
 289             text: 'DataView',\r
 290             url: 'view/data-view.html',\r
 291             icon: 'data-view.gif',\r
 292             desc: 'A basic DataView with custom plugins for editable labels and drag selection of items.'\r
 293         },{\r
 294             text: 'DataView (advanced)',\r
 295             url: 'view/chooser.html',\r
 296             icon: 'chooser.gif',\r
 297             desc: 'A more customized DataView supporting sorting and filtering with multiple templates.'\r
 298         }]\r
 299     },{\r
 300                 title   : 'Drag and Drop',\r
 301                 samples :  [{\r
 302                         text : 'Grid to Grid Drag and Drop',\r
 303                         url  : 'dd/dnd_grid_to_grid.html',\r
 304                         icon : 'dd-gridtogrid.gif',\r
 305                         desc : 'A simple drag and drop from grid to grid implementation.'\r
 306         },{\r
 307                         text : 'Grid to FormPanel Drag and Drop',\r
 308                         url  : 'dd/dnd_grid_to_formpanel.html',\r
 309                         icon : 'dd-gridtoformpanel.gif',\r
 310                         desc : 'A basic drag and drop from grid to formpanel.'\r
 311         },{\r
 312                         text : 'Custom Drag and Drop',\r
 313                         url  : 'dd/dragdropzones.html',\r
 314                         icon : 'dd-zones.gif',\r
 315                         desc : 'Enabling drag and drop between a DataView and a grid using DragZone and DropZone extensions.'\r
 316         }]\r
 317         },{\r
 318         title: 'Miscellaneous',\r
 319         samples: [{\r
 320             text: 'History',\r
 321             url: 'history/history.html',\r
 322             icon: 'history.gif',\r
 323             desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'\r
 324         },{\r
 325             text: 'Google Maps',\r
 326             url: 'window/gmap.html',\r
 327             icon: 'gmap-panel.gif',\r
 328             desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'\r
 329         },{\r
 330             text: 'StatusBar',\r
 331             url: 'statusbar/statusbar-demo.html',\r
 332             icon: 'statusbar.gif',\r
 333             desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.'\r
 334         },{\r
 335             text: 'StatusBar (advanced)',\r
 336             url: 'statusbar/statusbar-advanced.html',\r
 337             icon: 'statusbar-plugin.gif',\r
 338             desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.'\r
 339        },{\r
 340             text: 'Slider',\r
 341             url: 'slider/slider.html',\r
 342             icon: 'slider.gif',\r
 343             desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and more.'\r
 344         },{\r
 345             text: 'QuickTips',\r
 346             url: 'simple-widgets/qtips.html',\r
 347             icon: 'qtips.gif',\r
 348             desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.'\r
 349         },{\r
 350             text: 'Progress Bar',\r
 351             url: 'simple-widgets/progress-bar.html',\r
 352             icon: 'progress.gif',\r
 353             desc: 'A basic progress bar component shown in various configurations and with custom styles.'\r
 354         },{\r
 355             text: 'Panels',\r
 356             url: 'panel/panels.html',\r
 357             icon: 'panel.gif',\r
 358             desc: 'A basic collapsible panel example.'\r
 359         },{\r
 360             text: 'Resizable',\r
 361             url: 'resizable/basic.html',\r
 362             icon: 'resizable.gif',\r
 363             desc: 'Examples of making any element resizable with various configuration options.'\r
 364         },{\r
 365             text: 'Spotlight',\r
 366             url: 'core/spotlight.html',\r
 367             icon: 'spotlight.gif',\r
 368             desc: 'A utility for masking everything except a single element on the page to visually highlight it.'\r
 369         },{\r
 370             text: 'Localization (static)',\r
 371             url: 'locale/dutch-form.html',\r
 372             icon: 'locale-dutch.gif',\r
 373             desc: 'Demonstrates fully localizing a form by including a custom locale script.'\r
 374         },{\r
 375             text: 'Localization (dynamic)',\r
 376             url: 'locale/multi-lang.html',\r
 377             icon: 'locale-switch.gif',\r
 378             desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'\r
 379         }]\r
 380     }];\r
 381 \r
 382     for(var i = 0, c; c = catalog[i]; i++){\r
 383         c.id = 'sample-' + i;\r
 384     }\r
 385 \r
 386     var store = new Ext.data.JsonStore({\r
 387         idProperty: 'id',\r
 388         fields: ['id', 'title', 'samples'],\r
 389         data: catalog\r
 390     });\r
 391 \r
 392     new Ext.Panel({\r
 393         autoHeight: true,\r
 394         collapsible: true,\r
 395         frame: true,\r
 396         title: 'View Samples',\r
 397         items: new SamplePanel({\r
 398             store: store\r
 399         })\r
 400     }).render('all-demos');\r
 401 \r
 402     var tpl = new Ext.XTemplate(\r
 403         '<tpl for="."><li><a href="#{id}">{title:stripTags}</a></li></tpl>'\r
 404     );\r
 405     tpl.overwrite('sample-menu', catalog);\r
 406 \r
 407     Ext.select('#sample-spacer').remove();\r
 408 \r
 409     setTimeout(function(){\r
 410         Ext.get('loading').remove();\r
 411         Ext.fly('loading-mask').fadeOut({\r
 412                         remove:true,\r
 413                         callback : function() {\r
 414                                 var cp = new Ext.state.CookieProvider();\r
 415 \r
 416                                 if(window.console && window.console.firebug && ! cp.get('hideFBWarning')){\r
 417                                         var tpl = new Ext.Template(\r
 418                                                 '<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
 419                                         );\r
 420                                         var newEl = tpl.insertFirst('all-demos');\r
 421                                         \r
 422                                         Ext.fly('hideWarning').on('click', function() {\r
 423                                                 Ext.fly(newEl).slideOut('t',{remove:true});\r
 424                                                 cp.set('hideFBWarning', true);  \r
 425                                         });\r
 426                                         Ext.fly(newEl).slideIn();\r
 427                                 }\r
 428                                 \r
 429                                 \r
 430                         }\r
 431                 \r
 432                 \r
 433                 });\r
 434     }, 250);\r
 435 \r
 436 });