examples/examples.json

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