examples/data.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.ns('Ext.samples');
  16
  17 Ext.samples.samplesCatalog = [
  18     {
  19         title: 'Combination Examples',
  20         samples: [
  21             {
  22                 text: 'Feed Viewer',
  23                 url:  'feed-viewer/feed-viewer.html',
  24                 icon: 'feeds.gif',
  25                 desc: 'RSS feed reader example application that features a swappable reader panel layout.',
  26                 status: 'updated'
  27             },
  28             {
  29                 text: 'Web Desktop',
  30                 url:  'desktop/desktop.html',
  31                 icon: 'desktop.gif',
  32                 desc: 'Demonstrates how one could build a desktop in the browser using Ext components including a module plugin system.',
  33                 status: 'updated'
  34             },
  35             {
  36                 text: 'Portal Demo',
  37                 url:  'portal/portal.html',
  38                 icon: 'portal.gif',
  39                 desc: 'A page layout using several custom extensions to provide a web portal interface.',
  40                 status: 'updated'
  41             },
  42             {
  43                 text: 'Ext JS 3 & 4 on one page',
  44                 url:  'sandbox/sandbox.html',
  45                 icon: 'sandbox.gif',
  46                 desc: 'This example demonstrates Ext JS 4\'s sandboxing behavior which allows you to run Ext JS 3 & 4 on the same page.',
  47                 status: 'new'
  48             },
  49             {
  50                 text: 'Image Viewer',
  51                 url: 'organizer/organizer.html',
  52                 icon: 'organizer.gif',
  53                 desc: 'DataView and TreePanel example that demonstrates dragging data items from a DataView into a TreePanel.'
  54             },
  55             {
  56                 text: 'Theme Viewer',
  57                 url: 'themes/index.html',
  58                 icon: 'themes.gif',
  59                 desc: 'View and test every Ext component against bundled Ext themes.'
  60             }
  61         ]
  62     },
  63     {
  64         title: 'Accessibility',
  65         samples: [
  66             {
  67                 text: 'Keyboard Feed Viewer',
  68                 url: 'key-feed-viewer/feed-viewer.html',
  69                 icon: 'keyboard.gif',
  70                 desc: "Shows Ext JS 4's comprehensive keyboard support for users who have difficulty using a pointing device",
  71                 status: 'new'
  72
  73             },
  74             {
  75                 text: 'Binding a Grid to a Form',
  76                 url:  'form/form-grid-access.html',
  77                 icon: 'form-grid-binding-access.gif',
  78                 desc: 'A grid embedded within a FormPanel that uses the Accessibility theme.'
  79             }
  80         ]
  81     },
  82     {
  83         title: 'Grids',
  84         samples: [
  85             {
  86                 text: 'Basic Array Grid',
  87                 url:  'grid/array-grid.html',
  88                 icon: 'grid-array.gif',
  89                 desc: 'A basic read-only grid loaded from local array data that demonstrates the use of custom column renderer functions.',
  90                 status: 'updated'
  91             },
  92             {
  93                 text: 'XML Grid',
  94                 url:  'grid/xml-grid.html',
  95                 icon: 'grid-xml.gif',
  96                 desc: 'A simple read-only grid loaded from XML data.'
  97             },
  98             {
  99                 text: 'Paging',
 100                 url:  'grid/paging.html',
 101                 icon: 'grid-paging.gif',
 102                 desc: 'A grid with paging, cross-domain data loading and custom- rendered expandable row bodies.'
 103             },
 104             {
 105                 text: 'Sliding Pager',
 106                 url: 'grid/sliding-pager.html',
 107                 icon: 'slider-pager.gif',
 108                 desc: 'A demonstration on the integration of the Slider with the Paging Toolbar using a custom plugin.'
 109             },
 110             {
 111                 text: 'Grouping',
 112                 url: 'grid/groupgrid.html',
 113                 icon: 'grid-grouping.gif',
 114                 desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.'
 115             },
 116             {
 117                 text: 'Grid Plugins',
 118                 url: 'grid/grid-plugins.html',
 119                 icon: 'grid-plugins.gif',
 120                 desc: 'Multiple grids customized via plugins: expander rows, checkbox selection and row numbering.'
 121             },
 122             {
 123                 text: 'Grid Filtering',
 124                 url: 'grid-filtering/grid-filter-local.html',
 125                 icon: 'grid-filter.gif',
 126                 desc: 'Grid feature providing custom data filtering menus that support various data types.',
 127                 status: 'updated'
 128             },
 129             {
 130                 text: 'Grid Data Binding (basic)',
 131                 url: 'grid/binding.html',
 132                 icon: 'grid-data-binding.gif',
 133                 desc: 'Data binding a grid to a detail preview panel via the grid\'s RowSelectionModel.'
 134             },
 135             {
 136                 text: 'Grid Data Binding (advanced)',
 137                 url: 'grid/binding-with-classes.html',
 138                 icon: 'grid-data-binding.gif',
 139                 desc: 'Refactoring the basic data binding example to use a class-based application design model.'
 140             },
 141             {
 142                 text: 'Multiple Sorting',
 143                 url: 'grid/multiple-sorting.html',
 144                 icon: 'grid-multiple-sorting.gif',
 145                 desc: 'An example that shows multi-level sorting in a Grid Panel.'
 146             },
 147             {
 148                 text: 'Grid Cell Editing',
 149                 url: 'grid/cell-editing.html',
 150                 icon: 'grid-cell-editing.gif',
 151                 desc: 'An example that shows cell editing in a Grid Panel.',
 152                 status: 'updated'
 153             },
 154             {
 155                 text: 'Grouped Header Grid',
 156                 url: 'grid/group-header-grid.html',
 157                 icon: 'grid-grouped-headers.gif',
 158                 desc: 'A basic grouping grid showing collapsible data groups that can be customized via the "Group By" header menu option.',
 159                 status: 'updated'
 160             },
 161             {
 162                 text: 'Grid Grouping with Summary',
 163                 url: 'grid/group-summary-grid.html',
 164                 icon: 'grid-summary.gif',
 165                 desc: 'Advanced grouping grid that allows cell editing and includes custom dynamic summary calculations.',
 166                 status: 'updated'
 167             },
 168             {
 169                 text: 'Grid with 50,0000 Rows',
 170                 url: 'grid/infinite-scroll.html',
 171                 icon: 'grid-infinite-scroll.gif',
 172                 desc: 'Sample grid which dynamically loads 50,000 rows.',
 173                 status: 'new'
 174             },
 175             {
 176                 text: 'Grid with Live Search Capability',
 177                 url: 'grid/live-search-grid.html',
 178                 icon: 'grid-live-search.gif',
 179                 desc: 'Grid with Live Search Capability.',
 180                 status: 'new'
 181             },
 182             {
 183                 text: 'Grid with Locking Capability',
 184                 url: 'grid/locking-grid.html',
 185                 icon: 'grid-locking.gif',
 186                 desc: 'An example extension that introduces the ability to add locking columns to the GridPanel.',
 187                 status: 'updated'
 188             },
 189             {
 190                 text: 'Grouping with Remote Summary',
 191                 url: 'grid/remote-group-summary-grid.html',
 192                 icon: 'grid-group-summaries.gif',
 193                 desc: 'Advanced grouping grid that allows cell editing and includes remotely loaded dynamic summary calculations.'
 194             },
 195             {
 196                 text: 'Grid Row Editing',
 197                 url: 'grid/row-editing.html',
 198                 icon: 'grid-row-editor.gif',
 199                 desc: 'An editable grid which allows the user to make modifications to an entire record at once.',
 200                 status: 'updated'
 201             },
 202             {
 203                 text: 'RESTful Store with GridPanel and RowEditor',
 204                 url: 'restful/restful.html',
 205                 icon: 'grid-row-editor.gif',
 206                 desc: 'A RESTful Store with JsonWriter which automatically generates CRUD requests to the server.'
 207             },
 208             {
 209                 text: 'Editable Grid with Writable Store',
 210                 url: 'writer/writer.html',
 211                 icon: 'writer-thumb.gif',
 212                 desc: "This Store uses Data's writer to automatically generate CRUD requests to the server through a standard HttpProxy."
 213             },
 214             {
 215                 text: 'Buffered Scrolling',
 216                 url: 'grid/buffer-grid.html',
 217                 icon: 'buffer-grid.gif',
 218                 desc: "The new grid uses a virtualized scrolling system to handle potentially infinite data sets without any impact on client side performance.",
 219                 status: 'updated'
 220             },
 221             {
 222                 text: 'List View',
 223                 url: 'grid/list-view.html',
 224                 icon: 'list-view.gif',
 225                 desc: "Ext 4 replaces Ext.ListView with the default Ext.grid.Panel.",
 226                 status: 'updated'
 227             },
 228             {
 229                 text: 'Progress Bar Pager',
 230                 url: 'grid/progress-bar-pager.html',
 231                 icon: 'progress-bar-pager.gif',
 232                 desc: "Progress Bar Pager Extension."
 233             },{
 234                 text: 'Property Grid',
 235                 url: 'grid/property.html',
 236                 icon: 'grid-property.gif',
 237                 desc: "Create a property grid from an object."
 238             },{
 239                 text: 'Grid From Markup',
 240                 url: 'grid/transform-dom.html',
 241                 icon: 'grid-transform.gif',
 242                 desc: "Create a grid with from an existing, unformatted HTML table."
 243             }
 244         ]
 245     },
 246     {
 247         title: 'Charts',
 248         samples: [
 249             {
 250                 text: 'Area Charts',
 251                 url: 'charts/Area.html',
 252                 icon: 'chart-area.gif',
 253                 desc: 'Display 7 sets of random data in an area series. Reload data will randomly generate a new set of data in the store.',
 254                 status: 'new'
 255             },
 256             {
 257                 text: 'Custom Area Charts',
 258                 url: 'charts/Area - BrowserStats.html',
 259                 icon: 'area-browsers.gif',
 260                 desc: 'Display browser usage trends in an area series. This chart uses custom gradients for the colors and the legend is interactive.',
 261                 status: 'new'
 262             },
 263             {
 264                 text: 'Bar Charts',
 265                 url: 'charts/Bar.html',
 266                 icon: 'chart-bar.gif',
 267                 desc: 'Display a sets of random data in a bar series. Reload data will randomly generate a new set of data in the store.',
 268                 status: 'new'
 269             },
 270             {
 271                 text: 'Custom Bar Charts',
 272                 url: 'charts/BarRenderer.html',
 273                 icon: 'chart-bar-renderer.gif',
 274                 desc: 'Displaying a horizontal bar series with a bar renderer that modifies the color of each bar.',
 275                 status: 'new'
 276             },
 277             {
 278                 text: 'Complex Dashboard',
 279                 url: 'charts/FormDashboard.html',
 280                 icon: 'form-dashboard.gif',
 281                 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.',
 282                 status: 'new'
 283             },
 284             {
 285                 text: 'Rich Tips',
 286                 url: 'charts/TipsChart.html',
 287                 icon: 'rich-tips.gif',
 288                 desc: 'Showing a line series with rich tips. Tips show dynamic information in Grid and Pie chart components.',
 289                 status: 'new'
 290             },
 291             {
 292                 text: 'Themed Line Charts',
 293                 url: 'charts/Charts.html',
 294                 icon: 'chart-themed.gif',
 295                 desc: 'Using 3.x theme. Displaying multiple charts and mixed charts with mouse over and click interaction.',
 296                 status: 'new'
 297             },
 298             {
 299                 text: 'Column Charts',
 300                 url: 'charts/Column.html',
 301                 icon: 'chart-column.gif',
 302                 desc: 'Display a set of random data in a column series. Reload data will randomly generate a new set of data in the store.',
 303                 status: 'new'
 304             },
 305             {
 306                 text: 'Line Charts',
 307                 url: 'charts/Line.html',
 308                 icon: 'chart-line.gif',
 309                 desc: 'Display 2 sets of random data in a line series. Reload data will randomly generate a new set of data in the store.',
 310                 status: 'new'
 311             },
 312             {
 313                 text: 'Column Custom Background',
 314                 url: 'charts/Column2.html',
 315                 icon: 'column2.gif',
 316                 desc: 'A Column chart with customized theme and animation transitions',
 317                 status: 'new'
 318             },
 319             {
 320                 text: 'Mixed Series Chart',
 321                 url: 'charts/Mixed.html',
 322                 icon: 'chart-mixed.gif',
 323                 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.',
 324                 status: 'new'
 325             },
 326             {
 327                 text: 'Pie Charts',
 328                 url: 'charts/Pie.html',
 329                 icon: 'chart-pie.gif',
 330                 desc: 'Display 5 sets of random data using a pie chart. Reload data will randomly generate a new set of data in the store.',
 331                 status: 'new'
 332             },
 333             {
 334                 text: 'Custom Pie Charts',
 335                 url: 'charts/PieRenderer.html',
 336                 icon: 'chart-pie-renderer.gif',
 337                 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.',
 338                 status: 'new'
 339             },
 340             {
 341                 text: 'Radar Charts',
 342                 url: 'charts/Radar.html',
 343                 icon: 'chart-radar.gif',
 344                 desc: 'Display 3 sets of random data in a radar series. Note this example uses a radial axis.',
 345                 status: 'new'
 346             },
 347             {
 348                 text: 'Filled Radar Charts',
 349                 url: 'charts/RadarFill.html',
 350                 icon: 'chart-radar-fill.gif',
 351                 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.',
 352                 status: 'new'
 353             },
 354             {
 355                 text: 'Scatter Charts',
 356                 url: 'charts/Scatter - Renderer.html',
 357                 icon: 'chart-scatter.gif',
 358                 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.',
 359                 status: 'new'
 360             },
 361             {
 362                 text: 'Stacked Bar Charts',
 363                 url: 'charts/StackedBar.html',
 364                 icon: 'chart-bar-stacked.gif',
 365                 desc: 'Showing movie taking by genre as a stacked bar chart sample. Filter the stacks by clicking on the legend items.',
 366                 status: 'new'
 367             },
 368             {
 369                 text: 'Live Updated Chart',
 370                 url: 'charts/LiveUpdates.html',
 371                 icon: 'live-updated.gif',
 372                 desc: 'Showing a line series with data updating at a regular interval.',
 373                 status: 'new'
 374             },
 375             {
 376                 text: 'Live Animated Chart',
 377                 url: 'charts/LiveAnimated.html',
 378                 icon: 'live-animated.gif',
 379                 desc: 'Showing a line series with smooth transitions on data updating at regular intervals.',
 380                 status: 'new'
 381             },
 382             {
 383                 text: 'Gauge Chart',
 384                 url: 'charts/Gauge.html',
 385                 icon: 'gauge.gif',
 386                 desc: 'Display three custom gauge charts bound to different data stores with different configuration options and easings.',
 387                 status: 'new'
 388             },
 389             {
 390                 text: 'Grouped Bar',
 391                 url: 'charts/GroupedBar.html',
 392                 icon: 'grouped-bar.gif',
 393                 desc: 'Display 3 sets of random data in a grouped bar series.',
 394                 status: 'new'
 395             },
 396             {
 397                 text: 'Reload Chart',
 398                 url: 'charts/ReloadChart.html',
 399                 icon: 'reload-chart.gif',
 400                 desc: 'Display a Column Chart Sample that animates when refreshing the data set',
 401                 status: 'new'
 402             }
 403         ]
 404     },
 405     {
 406         title: 'Tabs',
 407         samples: [
 408             {
 409                 text: 'Basic Tabs',
 410                 url: 'tabs/tabs.html',
 411                 icon: 'tabs.gif',
 412                 desc: 'Basic tab functionality including autoHeight, tabs from markup, Ajax loading and tab events.'
 413             },
 414             {
 415                 text: 'Advanced Tabs',
 416                 url: 'tabs/tabs-adv.html',
 417                 icon: 'tabs-adv.gif',
 418                 desc: 'Advanced tab features including tab scrolling, adding tabs programmatically and a context menu plugin.'
 419             },
 420             {
 421                text: 'Tab overflow menu',
 422                url: 'tabs/tab-scroller-menu.html',
 423                icon: 'tabs-adv.gif',
 424                desc: 'Demonstrates the TabPanel overflow menu extension, which makes management of large numbers of tabs easier',
 425                status: 'updated'
 426             }
 427         ]
 428     },
 429     {
 430         title: 'Windows',
 431         samples: [
 432             {
 433                 text: 'Window Variations',
 434                 url: 'window/window.html',
 435                 icon: 'window-layout.gif',
 436                 desc: 'A collection of Windows in different configurations, showing headers attached to any side of the window.',
 437                 status: 'new'
 438             },
 439             {
 440                 text: 'Layout Window',
 441                 url: 'window/layout.html',
 442                 icon: 'window.gif',
 443                 desc: 'A window containing a basic BorderLayout with nested TabPanel.'
 444             },
 445             {
 446                 text: 'MessageBox',
 447                 url: 'message-box/msg-box.html',
 448                 icon: 'msg-box.gif',
 449                 desc: 'Different styles include confirm, alert, prompt, progress and wait and also support custom icons.'
 450             }
 451         ]
 452     },
 453     {
 454         title: 'Trees',
 455         samples: [
 456             {
 457                 text: 'Drag and Drop Reordering',
 458                 url: 'tree/reorder.html',
 459                 icon: 'tree-reorder.gif',
 460                 desc: 'A TreePanel loaded asynchronously via a JSON TreeLoader that shows drag and drop with container scroll.'
 461             },
 462             {
 463                 text: 'Multiple trees',
 464                 url: 'tree/two-trees.html',
 465                 icon: 'tree-two.gif',
 466                 desc: 'Drag and drop between two different sorted TreePanels.'
 467             },
 468             {
 469                 text: 'TreeGrid',
 470                 url: 'tree/treegrid.html',
 471                 icon: 'tree-columns.gif',
 472                 desc: 'The TreeGrid component',
 473                 status: 'updated'
 474             },
 475             {
 476                 text: 'Check Tree',
 477                 url: 'tree/check-tree.html',
 478                 icon: 'tree-check.gif',
 479                 desc: 'An example showing simple checkbox selection in a tree.'
 480             },
 481             {
 482                 text: 'XML Tree',
 483                 url: 'tree/xml-tree.html',
 484                 icon: 'tree-xml-loader.gif',
 485                 desc: 'A custom TreeLoader implementation that demonstrates loading a tree from an XML document.'
 486             }
 487         ]
 488     },
 489     {
 490         title: 'Layout Managers',
 491         samples: [
 492             {
 493                 text: 'Layout Browser',
 494                 url:  'layout-browser/layout-browser.html',
 495                 icon: 'layout-browser.gif',
 496                 desc: 'Comprehensive showcase of the standard layout managers as well as several custom and combination layouts and combination examples.'
 497             },
 498             {
 499                 text: 'Border Layout',
 500                 url:  'layout/border.html',
 501                 icon: 'border-layout.gif',
 502                 desc: 'A complex BorderLayout implementation that shows nesting multiple components and sub-layouts.',
 503                 status: 'updated'
 504             },
 505             {
 506                 text: 'Accordion Layout',
 507                 url:  'layout/accordion.html',
 508                 icon: 'layout-accordion.gif',
 509                 desc: 'A basic accordion layout within a border layout.'
 510             },
 511             {
 512                 text: 'Anchor Layout (Form)',
 513                 url:  'form/anchoring.html',
 514                 icon: 'layout-form.gif',
 515                 desc: 'A simple example of form fields utilizing an anchor layout in a window for flexible form resizing.'
 516             },
 517             {
 518                 text: 'Anchor Layout (Panel)',
 519                 url:  'layout/anchor.html',
 520                 icon: 'layout-anchor.gif',
 521                 desc: 'An example of Panels anchored in the browser window.'
 522             },
 523             {
 524                 text: 'Column Layout',
 525                 url:  'layout/column.html',
 526                 icon: 'layout-column.gif',
 527                 desc: 'An example of Panels managed by a column layout.'
 528             },
 529             {
 530                 text: 'Table Layout',
 531                 url:  'layout/table.html',
 532                 icon: 'layout-table.gif',
 533                 desc: 'An example of Panels managed by a table layout.'
 534             },
 535             {
 536                text: 'HBox Layout',
 537                url:  'layout/hbox.html',
 538                icon: 'layout-column.gif',
 539                desc: 'Interactive layout illustrating the capabilities of the HBox Layout.'
 540             },
 541             {
 542                 text: 'VBox Layout',
 543                 url:  'layout/vbox.html',
 544                 icon: 'layout-vbox.gif',
 545                 desc: 'Interactive layout illustrating the capabilities of the VBox Layout.'
 546             },
 547             {
 548                 text: 'Complex Layout',
 549                 url:  'layout/complex.html',
 550                 icon: 'complex-layout.gif',
 551                 desc: 'A complex layout example.',
 552                 status: 'updated'
 553             }
 554         ]
 555     },
 556     {
 557         title: 'Drawing',
 558         samples: [
 559             {
 560                 text: 'Resizable Sencha Logo',
 561                 url: 'draw/Sencha.html',
 562                 icon: 'draw-sencha.gif',
 563                 desc: 'Resolution independent Sencha logo in a resizable component.',
 564                 status: 'new'
 565             },
 566             {
 567                 text: 'Browser Logos',
 568                 url: 'draw/Logos.html',
 569                 icon: 'draw-logos.gif',
 570                 desc: 'Resolution independent logos of all the popular browsers.',
 571                 status: 'new'
 572             },
 573             {
 574                 text: 'Tiger',
 575                 url: 'draw/Tiger.html',
 576                 icon: 'draw-tiger.gif',
 577                 desc: 'The classic SVG Tiger in a floatable, draggable component. Scalable to any size, fully resolution independent.',
 578                 status: 'new'
 579             },
 580             {
 581                 text: 'Rotate Text',
 582                 url: 'draw/Rotate Text.html',
 583                 icon: 'draw-rotate-text.gif',
 584                 desc: 'Create text in a Draw Component which can be rotated easily in any browser.',
 585                 status: 'new'
 586             }
 587         ]
 588     },
 589     {
 590         title: 'Drag and Drop',
 591         samples: [
 592             {
 593                 text: 'Grid to Grid DnD',
 594                 url: 'dd/dnd_grid_to_grid.html',
 595                 icon: 'dd-gridtogrid.gif',
 596                 desc: 'Shows how rows can be easily dragged and dropped between two or more grids'
 597             },
 598             {
 599                 text: 'Grid to Form DnD',
 600                 url: 'dd/dnd_grid_to_formpanel.html',
 601                 icon: 'dd-gridtoformpanel.gif',
 602                 desc: 'Enables a user to drag a record from a grid and drop it into a form, where it can be edited'
 603             },
 604             {
 605                 text: 'Field to Grid DnD',
 606                 url: 'dd/field-to-grid-dd.html',
 607                 icon: 'dd-fieldtogrid.gif',
 608                 desc: 'Demonstrates dragging a value from a field onto a grid cell'
 609             },
 610             {
 611                 text: 'Custom Drag and Drop',
 612                 url: 'dd/dragdropzones.html',
 613                 icon: 'dd-zones.gif',
 614                 desc: 'A completely custom Drag and Drop example showing DnD between a DataView and a grid'
 615             }
 616         ]
 617     },
 618     {
 619         title: 'Toolbars and Menus',
 620         samples: [
 621             {
 622                 text: 'Basic Toolbar',
 623                 url:  'menu/menus.html',
 624                 icon: 'toolbar.gif',
 625                 desc: 'Toolbar and menus that contain various components like date pickers, color pickers, sub-menus and more.',
 626                 status: 'updated'
 627             },
 628             {
 629                 text: 'Toolbar Button Groups',
 630                 url:  'toolbar/toolbars.html',
 631                 icon: 'toolbar-button-groups.gif',
 632                 desc: 'Group buttons together in the toolbar.'
 633             },
 634             {
 635                 text: 'Vertical Toolbars',
 636                 url:  'toolbar/vertical-toolbars.html',
 637                 icon: 'toolbar.gif',
 638                 desc: 'Vertical Toolbars on the left and right. Combined vertical and horizontal toolbars.',
 639                 status: 'new'
 640             },
 641             {
 642                text: 'Ext Grid Actions',
 643                url:  'menu/action-grid.html',
 644                icon: 'actions-grid.gif',
 645                desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.',
 646                status: 'updated'
 647             },
 648             {
 649                 text: 'Reorderable Toolbar',
 650                 url:  'toolbar/reorderable.html',
 651                 icon: 'toolbar-reorderable.png',
 652                 desc: 'Items within a toolbar can be reordered using this plugin.'
 653             },
 654             {
 655                text: 'Overflow Toolbar',
 656                url:  'toolbar/overflow.html',
 657                icon: 'toolbar-reorderable.png',
 658                desc: 'Items within a toolbar will be placed into an overflow menu if the toolbar is too narrow.'
 659             },
 660             {
 661                 text: 'Status Bar',
 662                 url:  'statusbar/statusbar-demo.html',
 663                 icon: 'statusbar-demo.gif',
 664                 desc: 'A simple StatusBar that can be dropped into the bottom of any panel to display status text and icons.'
 665             },
 666             {
 667                 text: 'Status Bar (Advanced)',
 668                 url:  'statusbar/statusbar-advanced.html',
 669                 icon: 'statusbar-adv.gif',
 670                 desc: 'Customizing the StatusBar via a plugin to provide automatic form validation monitoring and error linking.'
 671             },
 672             {
 673                 text: 'Ext Toolbar Actions',
 674                 url: 'menu/actions.html',
 675                 icon: 'actions.gif',
 676                 desc: 'Bind the same behavior to multiple buttons, toolbar and menu items using the Ext.Action class.'
 677             }
 678
 679         ]
 680     },
 681     {
 682         title: 'ComboBox',
 683         samples: [
 684             {
 685                 text: 'Basic ComboBox',
 686                 url: 'form/combos.html',
 687                 icon: 'combo.gif',
 688                 desc: 'Basic combos, combos rendered from markup and customized list layout to provide item tooltips.'
 689             },
 690             {
 691                  text: 'ComboBox Templates',
 692                  url: 'form/forum-search.html',
 693                  icon: 'combo-custom.gif',
 694                  desc: 'Customized combo with template-based list rendering, remote loading and paging.'
 695             }
 696         ]
 697     },
 698     {
 699         title: 'DataView',
 700         samples: [{
 701                 text  : 'DataView',
 702                 url: 'view/data-view.html',
 703                 icon  : 'data-view.gif',
 704                 desc  : 'This example shows how to use an Ext.view.View',
 705                 status: 'updated'
 706             },
 707             {
 708                 text  : 'Animated DataView',
 709                 url: 'view/animated-dataview.html',
 710                 icon  : 'animated-dataview.png',
 711                 desc  : 'Transition animation plugin applied to a standard DataView'
 712             },
 713             {
 714                 text  : 'Multi-sort DataView',
 715                 url: 'view/multisort/multisort.html',
 716                 icon  : 'multisort-dataview.png',
 717                 desc  : 'Example demonstrating the ability to sort a DataView by multiple sorters.'
 718             },
 719             {
 720                 text  : 'Advanced DataView',
 721                 url: 'view/chooser/chooser.html',
 722                 icon  : 'advanced-dataview.png',
 723                 desc  : 'DataView which allows you to filter and sort images.'
 724             }
 725         ]
 726     },
 727     {
 728         title: 'Forms',
 729         samples: [
 730             {
 731                 text: 'Dynamic Forms',
 732                 url: 'form/dynamic.html',
 733                 icon: 'form-dynamic.gif',
 734                 desc: 'Various example forms showing collapsible fieldsets, column layout, nested TabPanels and more.'
 735             },
 736             {
 737                 text: 'Ajax with XML Forms',
 738                 url: 'form/xml-form.html',
 739                 icon: 'form-xml.gif',
 740                 desc: 'Ajax-loaded form fields from remote XML data and remote field validation on submit.'
 741             },
 742             {
 743                 text: 'Contact Us Form',
 744                 url: 'form/contact-form.html',
 745                 icon: 'form-contact.gif',
 746                 desc: 'An example of a common popup Contact Us form.',
 747                 status: 'new'
 748             },
 749             {
 750                 text: 'Custom Search Fields',
 751                 url: 'form/forum-search.html',
 752                 icon: 'form-custom.gif',
 753                 desc: 'A TriggerField search extension combined with an XTemplate for custom results rendering.'
 754             },
 755             {
 756                 text: 'Binding a Grid to a Form',
 757                 url:  'form/form-grid.html',
 758                 icon: 'form-grid-binding.gif',
 759                 desc: 'A grid embedded within a FormPanel that automatically loads records into the form on row selection.',
 760                 status: 'updated'
 761             },
 762             {
 763                 text: 'Field Types',
 764                 url:  'form/field-types.html',
 765                 icon: 'form-field-types.gif',
 766                 desc: 'This example shows off all of the field types available in Ext JS in lots of different configurations.',
 767                 status: 'updated'
 768             },
 769             {
 770                  text: 'Advanced Validation',
 771                  url:  'form/adv-vtypes.html',
 772                  icon: 'form-adv-vtypes.gif',
 773                  desc: 'Relational form field validation using custom vtypes.'
 774             },
 775             {
 776                  text: 'Checkbox/Radio Groups',
 777                  url:  'form/check-radio.html',
 778                  icon: 'form-check-radio.gif',
 779                  desc: 'Examples showing different checkbox and radio group configurations.'
 780             },
 781             {
 782                 text: 'File Upload Field',
 783                 url:  'form/file-upload.html',
 784                 icon: 'form-file-upload.gif',
 785                 desc: 'A demo of how to give standard file upload fields a bit of Ext style using a custom class.',
 786                 status: 'updated'
 787             },
 788             {
 789                 text: 'Number Field',
 790                 url:  'form/number.html',
 791                 icon: 'form-spinner.gif',
 792                 desc: 'An example of the Number field, with and without a spinner.',
 793                 status: 'updated'
 794             },
 795             {
 796                 text: 'MultiSelect and ItemSelector',
 797                 url:  'multiselect/multiselect-demo.html',
 798                 icon: 'form-multiselect.gif',
 799                 desc: 'Example controls for selecting a list of items in forms.',
 800                 status: 'updated'
 801             },
 802             {
 803                 text: 'Registration Form',
 804                 url:  'form/registration.html',
 805                 icon: 'form-registration.gif',
 806                 desc: 'An account registration form, with custom global error message display.',
 807                 status : 'new'
 808             },
 809             {
 810                 text: 'Shopping Cart Checkout',
 811                 url:  'form/checkout.html',
 812                 icon: 'form-checkout.gif',
 813                 desc: 'An example of a common shopping cart checkout form.',
 814                 status : 'new'
 815             },
 816             {
 817                 text: 'Slider Field',
 818                 url:  'slider/slider-field.html',
 819                 icon: 'form-slider.png',
 820                 desc: 'Example usage of an Ext.Slider to select a number value in a form.'
 821             },
 822             {
 823                 text: 'Forms with vBox layout',
 824                 url:  'form/vbox-form.html',
 825                 icon: 'form-vbox.gif',
 826                 desc: 'Example usage of the vBox layout with forms. An added bonus is the FieldReplicator plugin.',
 827                     status : 'new'
 828             },
 829             {
 830                 text: 'Forms with hBox layout',
 831                 url:  'form/hbox-form.html',
 832                 icon: 'form-hbox.gif',
 833                 desc: 'Example usage of the hBox layout with a form. Includes automatically adjusting validation messages.',
 834                     status : 'new'
 835             },
 836             {
 837                  text  : 'Field Containers',
 838                  url: 'form/fieldcontainer.html',
 839                  icon  : 'form-fieldcontainer.png',
 840                  desc  : 'Example usage of the FieldContainer to place several fields on a single form row.',
 841                  status: 'new'
 842             },
 843             {
 844                 text: 'Form with absolute layout',
 845                 url:  'form/absform.html',
 846                 icon: 'form-absolute.gif',
 847                 desc: 'A simple example of form fields utilizing an absolute layout in a window for flexible form resizing.',
 848                 status: 'new'
 849             },
 850             {
 851                 text: 'Custom form Field',
 852                 url:  'form/custom-form.html',
 853                 icon: 'form-custom.gif',
 854                 desc: 'A simple example that demonstrate how to create a custom form field.',
 855                 status: 'new'
 856             }
 857         ]
 858     },
 859     {
 860         title: 'Direct',
 861         samples: [
 862             {
 863                 text: 'Direct',
 864                 url:  'direct/direct.html',
 865                 icon: 'direct.gif',
 866                 desc: 'An example demonstrating Remoting and Polling the server'
 867             },
 868             {
 869                 text: 'Direct Form',
 870                 url:  'direct/direct-form.html',
 871                 icon: 'direct.gif',
 872                 desc: 'Ext.Direct Remoting with a Form'
 873             },
 874             {
 875                 text: 'Direct Grid',
 876                 url:  'direct/direct-grid.html',
 877                 icon: 'direct.gif',
 878                 desc: 'Ext.Direct Remoting with a Grid'
 879             },
 880             {
 881                 text: 'Direct TreeLoader',
 882                 url:  'direct/direct-tree.html',
 883                 icon: 'direct.gif',
 884                 desc: 'Ext.Direct Remoting with a Tree',
 885                 status: 'new'
 886             },
 887             {
 888                 text: 'Direct Named Arguments',
 889                 url:  'direct/named-arguments.html',
 890                 icon: 'direct.gif',
 891                 desc: 'Ext.Direct Named Arguments',
 892                 status: 'new'
 893             }
 894         ]
 895     },
 896     {
 897         title: 'MVC',
 898         samples: [
 899             {
 900                 text: 'Feed Viewer',
 901                 url:  'app/feed-viewer/feed-viewer.html',
 902                 icon: 'feeds.gif',
 903                 desc: 'An MVC application version of the Feed Viewer example. This shows best practice for a small app',
 904                 status: 'new'
 905             },
 906             {
 907                 text: 'Nested Loading',
 908                 url:  'app/nested-loading/nested-loading.html',
 909                 icon: 'nested-loading.gif',
 910                 desc: 'An MVC example that shows simple navigation and nested loading with the data package',
 911                 status: 'new'
 912             }
 913         ]
 914     },
 915     {
 916         title: 'Miscellaneous',
 917         samples: [
 918             {
 919                 text: 'History',
 920                 url: 'history/history.html',
 921                 icon: 'history.gif',
 922                 desc: 'A History manager that allows the user to navigate an Ext UI via browser back/forward.'
 923             },
 924             {
 925                 text: 'Google Maps',
 926                 url: 'window/gmap.html',
 927                 icon: 'gmap-panel.gif',
 928                 desc: 'A Google Maps wrapper class that enables easy display of dynamic maps in Ext panels and windows.'
 929             },
 930             {
 931                 text: 'Editor',
 932                 url: 'simple-widgets/editor.html',
 933                 icon: 'editor.gif',
 934                 desc: 'An example demonstrating the ease of use of the Ext.editor class to modify DOM elements'
 935             },
 936             {
 937                 text: 'Slider',
 938                 url: 'slider/slider.html',
 939                 icon: 'slider.gif',
 940                 desc: 'A slider component that supports vertical mode, snapping, tooltips, customized styles and multiple thumbs.',
 941                 status: 'updated'
 942             },
 943             {
 944                 text: 'QuickTips',
 945                 url: 'qtips/qtips.html',
 946                 icon: 'qtips.gif',
 947                 desc: 'Various tooltip and quick tip configuration options including Ajax loading and mouse tracking.',
 948                 status: 'updated'
 949             },
 950             {
 951                 text: 'Progress Bar',
 952                 url: 'simple-widgets/progress-bar.html',
 953                 icon: 'progress.gif',
 954                 desc: 'A basic progress bar component shown in various configurations and with custom styles.'
 955             },
 956             {
 957                 text: 'Panels',
 958                 url: 'panel/panel.html',
 959                 icon: 'panel.gif',
 960                 desc: 'A basic collapsible panel example.',
 961                 status: 'updated'
 962             },
 963             {
 964                 text: 'Resizable',
 965                 url: 'resizer/basic.html',
 966                 icon: 'resizable.gif',
 967                 desc: 'Examples of making any element resizable with various configuration options.'
 968             },
 969             {
 970                 text: 'Buttons',
 971                 url: 'button/button.html',
 972                 icon: 'buttons.gif',
 973                 desc: 'Shows buttons in many of their possible configurations'
 974             },
 975             {
 976                 text: 'Spotlight',
 977                 url: 'core/spotlight.html',
 978                 icon: 'spotlight.gif',
 979                 desc: 'A utility for masking everything except a single element on the page to visually highlight it.'
 980             },
 981             {
 982                 text: 'Keyboard Navigation',
 983                 url: 'keynav/keynav.html',
 984                 icon: 'keyboard.gif',
 985                 desc: 'Shows a custom keyboard navigation using the KeyNav class',
 986                 status: 'new'
 987             },
 988             {
 989                 text: 'Localization (static)',
 990                 url: 'locale/dutch-form.html',
 991                 icon: 'locale-dutch.gif',
 992                 desc: 'Demonstrates fully localizing a form by including a custom locale script.'
 993             },
 994             {
 995                 text: 'Localization (dynamic)',
 996                 url: 'locale/multi-lang.html',
 997                 icon: 'locale-switch.gif',
 998                 desc: 'Dynamically render various Ext components in different locales by selecting from a locale list.'
 999             },
1000             {
1001                 text: 'Browser State Management',
1002                 url: 'state/state.html',
1003                 icon: 'state-saving.gif',
1004                 desc: "An example of storing your application's state.",
1005                 status: 'new'
1006             },
1007             {
1008                 text: 'Basic Templating',
1009                 url: 'platform/templates.html',
1010                 icon: 'templates.gif',
1011                 desc: "A basic templating example."
1012             },
1013             {
1014                 text: 'Bubble Panel',
1015                 url: 'panel/bubble-panel/bubble-panel.html',
1016                 icon: 'panel-bubble.gif',
1017                 desc: "This is a custom panel UI to achieve a different look and feel while not changing the default appearance of an Ext.Panel.",
1018                 status: 'updated'
1019             }
1020         ]
1021     }
1022 ];
1023