examples/data.js

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