examples/themes/themes.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require([
  16     'Ext.window.Window',
  17     'Ext.panel.Panel',
  18     'Ext.toolbar.*',
  19     'Ext.tree.Panel',
  20     'Ext.container.Viewport',
  21     'Ext.form.*',
  22     'Ext.tab.*',
  23     'Ext.slider.*',
  24     'Ext.layout.*',
  25     'Ext.button.*',
  26     'Ext.grid.*',
  27     'Ext.data.*',
  28     'EXt.util.*'
  29 ]);
  30
  31 Ext.onReady(function() {
  32     Ext.panel.Panel.prototype.defaultDockWeights = { top: 1, bottom: 3, left: 5, right: 7 };
  33
  34     var items = [];
  35
  36     /**
  37      * Basic panel
  38      */
  39     items.push({
  40         xtype: 'panel',
  41
  42         x: 50, y: 80,
  43
  44         width : 150,
  45         height: 90,
  46
  47         title: 'Basic Panel',
  48         animCollapse: true,
  49         bodyPadding: 5,
  50         html       : 'Some content'
  51     });
  52
  53     items.push({
  54         xtype: 'panel',
  55
  56         x: 50, y: 180,
  57
  58         width : 150,
  59         height: 70,
  60
  61         title: 'Collapsed Panel',
  62         animCollapse: true,
  63         bodyPadding: 5,
  64         html       : 'Some content',
  65         collapsible: true,
  66         collapsed: true
  67     });
  68
  69     /**
  70      * Masked Panel
  71      */
  72     items.push({
  73         xtype: 'panel',
  74
  75         x: 210, y: 80,
  76
  77         width : 130,
  78         height: 170,
  79
  80         title: 'Masked Panel',
  81
  82         bodyPadding: 5,
  83         html       : 'Some content',
  84         animCollapse: true,
  85         collapsible: true,
  86
  87         listeners: {
  88             render: function(p) {
  89                 p.body.mask('Loading...');
  90             },
  91             delay: 2000
  92         }
  93     });
  94
  95     /**
  96      * Framed Panel
  97      */
  98     items.push({
  99         xtype: 'panel',
 100
 101         x: 350, y: 80,
 102
 103         width : 170,
 104         height: 100,
 105
 106         title: 'Framed Panel',
 107         animCollapse: true,
 108
 109         dockedItems: [{
 110             dock: 'top',
 111             xtype: 'toolbar',
 112             items: [{
 113                 text: 'test'
 114             }]
 115         }, {
 116             dock: 'right',
 117             xtype: 'toolbar',
 118             items: [{
 119                 text: 'test'
 120             }]
 121         }, {
 122             dock: 'left',
 123             xtype: 'toolbar',
 124             items: [{
 125                 text: 'test'
 126             }]
 127         }],
 128
 129         html       : 'Some content',
 130         frame      : true
 131     });
 132
 133     items.push({
 134         xtype: 'panel',
 135
 136         x: 350, y: 190,
 137
 138         width : 170,
 139         height: 60,
 140
 141         title: 'Collapsed Framed Panel',
 142         animCollapse: true,
 143         bodyPadding: 5,
 144         bodyBorder: true,
 145         html       : 'Some content',
 146         frame      : true,
 147         collapsible: true,
 148         collapsed: true
 149     });
 150
 151     /**
 152      * Basic Window
 153      */
 154     Ext.createWidget('window', {
 155         x: 530, y: 80,
 156
 157         width   : 150,
 158         height  : 170,
 159         minWidth: 150,
 160         minHeight: 150,
 161         maxHeight: 170,
 162
 163         title: 'Window',
 164
 165         bodyPadding: 5,
 166         html       : 'Click Submit for Confirmation Msg.',
 167
 168         collapsible: true,
 169         closable   : false,
 170         draggable  : false,
 171         resizable: { handles: 's' },
 172         animCollapse: true,
 173
 174         tbar: [
 175             {text: 'Toolbar'}
 176         ],
 177         buttons: [
 178             {
 179                 text   : 'Submit',
 180                 id     : 'message_box',
 181                 handler: function() {
 182                     Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
 183                 }
 184             }
 185         ]
 186     }).show();
 187
 188     /**
 189      * Toolbar with a menu
 190      */
 191     var menu = Ext.createWidget('menu', {
 192         items: [
 193             {text: 'Menu item'},
 194             {text: 'Check 1', checked: true},
 195             {text: 'Check 2', checked: false},
 196             '-',
 197             {text: 'Option 1', checked: true,  group: 'opts'},
 198             {text: 'Option 2', checked: false, group: 'opts'},
 199             '-',
 200             {
 201                 text: 'Sub-items',
 202                 menu: Ext.createWidget('menu', {
 203                     items: [
 204                         {text: 'Item 1'},
 205                         {text: 'Item 2'}
 206                     ]
 207                 })
 208             }
 209         ]
 210     });
 211
 212     items.push({
 213         xtype: 'panel',
 214
 215         x: 690, y: 80,
 216
 217         width : 450,
 218         height: 170,
 219
 220         title: 'Basic Panel With Toolbars',
 221         collapsible: true,
 222
 223         tbar: [
 224             {
 225                 xtype: 'buttongroup',
 226                 title: 'Button Group',
 227                 columns: 2,
 228                 defaults: {
 229                     scale: 'small'
 230                 },
 231                 items: [{
 232                     xtype:'splitbutton',
 233                     text: 'Menu Button',
 234                     iconCls: 'add16',
 235                     menu: [{text: 'Menu Button 1'}]
 236                 },{
 237                     xtype:'splitbutton',
 238                     text: 'Cut',
 239                     iconCls: 'add16',
 240                     menu: [{text: 'Cut Menu Item'}]
 241                 }]
 242             }
 243         ],
 244         bbar: [
 245
 246             'Toolbar &amp; Menus',
 247             ' ',
 248             '-',
 249             {text: 'Button'},
 250             {
 251                 text: 'Menu Button',
 252                 id  : 'menu-btn',
 253                 menu: menu
 254             },
 255             {
 256                 xtype: 'splitbutton',
 257                 text : 'Split Button',
 258                 menu : Ext.createWidget('menu', {
 259                     items: [
 260                         {text: 'Item 1'},
 261                         {text: 'Item 2'}
 262                     ]
 263                 })
 264             },
 265             {
 266                 xtype       : 'button',
 267                 enableToggle: true,
 268                 pressed     : true,
 269                 text        : 'Toggle Button'
 270             }
 271         ],
 272         lbar:[
 273             { text: 'Left' }
 274         ],
 275         rbar: [
 276             { text: 'Right' }
 277         ]
 278     });
 279
 280     /**
 281      * Form and form widgets
 282      */
 283     items.push({
 284         xtype: 'form',
 285
 286         id   : 'form-widgets',
 287         title: 'Form Widgets',
 288
 289         x: 50, y: 260,
 290
 291         width : 630,
 292         height: 700,
 293         frame: true,
 294         collapsible: true,
 295
 296         tools: [
 297             {type:'toggle'},
 298             {type:'close'},
 299             {type:'minimize'},
 300             {type:'maximize'},
 301             {type:'restore'},
 302             {type:'gear'},
 303             {type:'pin'},
 304             {type:'unpin'},
 305             {type:'right'},
 306             {type:'left'},
 307             {type:'down'},
 308             {type:'refresh'},
 309             {type:'minus'},
 310             {type:'plus'},
 311             {type:'help'},
 312             {type:'search'},
 313             {type:'save'},
 314             {type:'print'}
 315         ],
 316
 317         bodyPadding: '10 20',
 318
 319         defaults: {
 320             anchor    : '98%',
 321             msgTarget : 'side',
 322             allowBlank: false
 323         },
 324
 325         items: [
 326             {
 327                 xtype: 'label',
 328                 text : 'Plain Label'
 329             },
 330             {
 331                 fieldLabel: 'TextField',
 332                 xtype     : 'textfield',
 333                 name      : 'someField',
 334                 emptyText : 'Enter a value'
 335             },
 336             {
 337                 fieldLabel: 'ComboBox',
 338                 xtype: 'combo',
 339                 store: ['Foo', 'Bar']
 340             },
 341             {
 342                 fieldLabel: 'DateField',
 343                 xtype     : 'datefield',
 344                 name      : 'date'
 345             },
 346             {
 347                 fieldLabel: 'TimeField',
 348                 name: 'time',
 349                 xtype: 'timefield'
 350             },
 351             {
 352                 fieldLabel: 'NumberField',
 353                 xtype     : 'numberfield',
 354                 name      : 'number',
 355                 emptyText : '(This field is optional)',
 356                 allowBlank: true
 357             },
 358             {
 359                 fieldLabel: 'TextArea',
 360                 xtype     : 'textareafield',
 361                 name      : 'message',
 362                 cls       : 'x-form-valid',
 363                 value     : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
 364             },
 365             {
 366                 fieldLabel: 'Checkboxes',
 367                 xtype: 'checkboxgroup',
 368                 columns: [100,100],
 369                 items: [
 370                     {boxLabel: 'Foo', checked: true,id:'fooChk',inputId:'fooChkInput'},
 371                     {boxLabel: 'Bar'}
 372                 ]
 373             },
 374             {
 375                 fieldLabel: 'Radios',
 376                 xtype: 'radiogroup',
 377                 columns: [100,100],
 378                 items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
 379             },
 380             {
 381                 hideLabel   : true,
 382                 id          : 'htmleditor',
 383                 xtype       : 'htmleditor',
 384                 name        : 'html',
 385                 enableColors: false,
 386                 value       : 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
 387                 height      : 110
 388             },
 389             {
 390                 xtype : 'fieldset',
 391                 title : 'Plain Fieldset',
 392                 items: [
 393                     {
 394                         hideLabel: true,
 395                         xtype: 'radiogroup',
 396                         columns: [100,100],
 397                         items: [
 398                             {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
 399                             {boxLabel: 'Radio B', name: 'radiogrp2'}
 400                         ]
 401                     }
 402                 ]
 403             },
 404             {
 405                 xtype      : 'fieldset',
 406                 title      : 'Collapsible Fieldset',
 407                 collapsible: true,
 408                 items: [
 409                     { xtype: 'checkbox', boxLabel: 'Checkbox 1' },
 410                     { xtype: 'checkbox', boxLabel: 'Checkbox 2' }
 411                 ]
 412             },
 413             {
 414                 xtype         : 'fieldset',
 415                 title         : 'Checkbox Fieldset',
 416                 checkboxToggle: true,
 417                 items: [
 418                     { xtype: 'radio', boxLabel: 'Radio 1', name: 'radiongrp1' },
 419                     { xtype: 'radio', boxLabel: 'Radio 2', name: 'radiongrp1' }
 420                 ]
 421             }
 422         ],
 423
 424         buttons: [
 425             {
 426                 text   :'Toggle Enabled',
 427                 handler: function() {
 428                     this.up('form').items.each(function(item) {
 429                         item.setDisabled(!item.disabled);
 430                     });
 431                 }
 432             },
 433             {
 434                 text   : 'Reset Form',
 435                 handler: function() {
 436                     Ext.getCmp('form-widgets').getForm().reset();
 437                 }
 438             },
 439             {
 440                 text   : 'Validate',
 441                 handler: function() {
 442                     Ext.getCmp('form-widgets').getForm().isValid();
 443                 }
 444             }
 445         ]
 446     });
 447
 448     /**
 449      * Border layout
 450      */
 451     items.push({
 452         xtype: 'panel',
 453
 454         width : 450,
 455         height: 350,
 456
 457         x: 690, y: 260,
 458
 459         title : 'BorderLayout Panel',
 460         layout: 'border',
 461         collapsible: true,
 462
 463         defaults: {
 464             collapsible: true,
 465             split      : true
 466         },
 467
 468         items: [
 469             {
 470                 title  : 'North',
 471                 region : 'north',
 472                 html   : 'North',
 473                 ctitle : 'North',
 474                 margins: '5 5 0 5',
 475                 height : 70
 476             },
 477             {
 478                 title       : 'South',
 479                 region      : 'south',
 480                 html        : 'South',
 481                 collapseMode: 'mini',
 482                 margins     : '0 5 5 5',
 483                 height      : 70
 484             },
 485             {
 486                 title       : 'West',
 487                 region      : 'west',
 488                 html        : 'West',
 489                 collapseMode: 'mini',
 490                 margins     : '0 0 0 5',
 491                 width       : 100
 492             },
 493             {
 494                 title  : 'East',
 495                 region : 'east',
 496                 html   : 'East',
 497                 margins: '0 5 0 0',
 498                 width  : 100
 499             },
 500             {
 501                 title      : 'Center',
 502                 region     : 'center',
 503                 collapsible: false,
 504                 html       : 'Center'
 505             }
 506         ]
 507     });
 508
 509     /**
 510      * Grid
 511      */
 512      var myData = [
 513          ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
 514          ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
 515          ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
 516          ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
 517          ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
 518          ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
 519          ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
 520          ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
 521          ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
 522          ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
 523      ];
 524
 525     var store = Ext.create('Ext.data.ArrayStore', {
 526         fields: [
 527            {name: 'company'},
 528            {name: 'price', type: 'float'},
 529            {name: 'change', type: 'float'},
 530            {name: 'pctChange', type: 'float'},
 531            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 532         ],
 533         sorters: {
 534             property : 'company',
 535             direction: 'ASC'
 536         },
 537         data: myData,
 538         pageSize: 8
 539     });
 540
 541     var pagingBar = Ext.createWidget('pagingtoolbar', {
 542         store      : store,
 543         displayInfo: true,
 544         displayMsg : 'Displaying topics {0} - {1} of {2}'
 545     });
 546
 547     items.push({
 548         xtype: 'gridpanel',
 549
 550         height: 200,
 551         width : 450,
 552
 553         x: 690, y: 620,
 554
 555         title: 'GridPanel',
 556         collapsible: true,
 557
 558         store: store,
 559
 560         columns: [
 561             {header: "Company",      flex: 1, sortable: true, dataIndex: 'company'},
 562             {header: "Price",        width: 75,  sortable: true, dataIndex: 'price'},
 563             {header: "Change",       width: 75,  sortable: true, dataIndex: 'change'},
 564             {header: "% Change",     width: 75,  sortable: true, dataIndex: 'pctChange'},
 565             {header: "Last Updated", width: 85,  sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 566         ],
 567         loadMask        : true,
 568
 569         viewConfig: {
 570             stripeRows: true
 571         },
 572
 573         bbar: pagingBar,
 574         tbar: [
 575             {text: 'Toolbar'},
 576             '->',
 577             {
 578                 xtype: 'triggerfield',
 579                 trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
 580                 trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
 581             }
 582         ]
 583     });
 584
 585     //=============================================================
 586     // Accordion / Tree
 587     //=============================================================
 588     var tree = Ext.create('Ext.tree.Panel', {
 589         title: 'TreePanel',
 590         root: {
 591             text: 'Root Node',
 592             expanded: true,
 593             children: [{
 594                 text: 'Item 1',
 595                 leaf: true
 596             }, {
 597                 text: 'Item 2',
 598                 leaf: true
 599             }, {
 600                 text: 'Folder',
 601                 children: [{
 602                     text: 'Item 3',
 603                     leaf: true
 604                 }]
 605             }]
 606         }
 607     });
 608
 609     var accConfig = {
 610         title : 'Accordion and TreePanel',
 611         collapsible: true,
 612         layout: 'accordion',
 613
 614         x: 690, y: 830,
 615
 616         width : 450,
 617         height: 240,
 618
 619         bodyStyle: {
 620             'background-color': '#eee'
 621         },
 622
 623         items: [
 624             tree, {
 625                 title: 'Item 2',
 626                 html: 'Some content'
 627             }, {
 628                 title: 'Item 3',
 629                 html : 'Some content'
 630             }
 631         ]
 632     };
 633
 634     items.push(accConfig);
 635
 636     /**
 637      * Tabs
 638      */
 639     var tabCfg = {
 640         xtype: 'tabpanel',
 641
 642         width : 310,
 643         height: 150,
 644
 645         activeTab: 0,
 646
 647         defaults: {
 648             bodyStyle: 'padding:10px;'
 649         },
 650
 651         items: [
 652             {
 653                 title: 'Tab 1',
 654                 html : 'Free-standing tab panel'
 655             },
 656             {
 657                 title   : 'Tab 2',
 658                 closable: true
 659             },
 660             {
 661                 title   : 'Tab 3',
 662                 closable: true
 663             }
 664         ]
 665     };
 666
 667     items.push(Ext.applyIf({
 668         x: 50, y: 970,
 669
 670         enableTabScroll: true,
 671
 672         items: [
 673             {
 674                 title: 'Tab 1',
 675                 html : 'Tab panel 1 content'
 676             },
 677             {
 678                 title   : 'Tab 2',
 679                 html : 'Tab panel 2 content',
 680                 closable: true
 681             },
 682             {
 683                 title   : 'Tab 3',
 684                 html : 'Tab panel 3 content',
 685                 closable: true
 686             },
 687             {
 688                 title   : 'Tab 4',
 689                 html : 'Tab panel 4 content',
 690                 closable: true
 691             },
 692             {
 693                 title   : 'Tab 5',
 694                 html : 'Tab panel 5 content',
 695                 closable: true
 696             },
 697             {
 698                 title   : 'Tab 6',
 699                 html : 'Tab panel 6 content',
 700                 closable: true
 701             }
 702         ]
 703     }, tabCfg));
 704
 705     items.push(Ext.apply({
 706         plain: true,
 707         x    : 370, y: 970
 708     }, tabCfg));
 709
 710     /**
 711      * DatePicker
 712      */
 713     items.push({
 714         xtype: 'panel',
 715
 716         x: 50, y: 1130,
 717
 718         border: false,
 719         width : 180,
 720
 721         items: {
 722             xtype: 'datepicker'
 723         }
 724     });
 725
 726     //=============================================================
 727     // Resizable
 728     //=============================================================
 729     var rszEl = Ext.getBody().createChild({
 730         style: 'background: transparent;',
 731         html: '<div style="padding:20px;">Resizable handles</div>'
 732     });
 733
 734     rszEl.position('absolute', 1, 240, 1130);
 735     rszEl.setSize(180, 180);
 736     Ext.create('Ext.resizer.Resizer', {
 737         el: rszEl,
 738         handles: 'all',
 739         pinned: true
 740     });
 741
 742     /**
 743      * ProgressBar / Slider
 744      */
 745     var progressbar = Ext.createWidget('progressbar', {
 746         value: 0.5
 747     });
 748
 749     items.push({
 750         xtype: 'panel',
 751         title: 'ProgressBar / Slider',
 752
 753         x: 690, y: 1080,
 754
 755         width: 450,
 756         height: 200,
 757
 758         bodyPadding: 5,
 759         layout     : {
 760             type : 'vbox',
 761             align: 'stretch'
 762         },
 763
 764         items: [
 765             progressbar,
 766             {
 767                 xtype    : 'slider',
 768                 hideLabel: true,
 769                 value    : 50,
 770                 margin   : '5 0 0 0'
 771             },
 772             {
 773                 xtype   : 'slider',
 774                 vertical: true,
 775                 value   : 50,
 776                 height  : 100,
 777                 margin  : '5 0 0 0'
 778             }
 779         ]
 780     });
 781
 782     items.push({
 783         width:250,
 784         height:182,
 785         x: 430, y: 1130,
 786         xtype: 'gridpanel',
 787         title: 'Framed Grid',
 788         collapsible: true,
 789         store: store,
 790         multiSelect: true,
 791         emptyText: 'No images to display',
 792         frame: true,
 793         enableColumnMove: false,
 794         columns: [
 795             {header: "Company",      flex: 1, sortable: true, dataIndex: 'company'},
 796             {header: "Price",        width: 75,  sortable: true, dataIndex: 'price'},
 797             {header: "Change",       width: 75,  sortable: true, dataIndex: 'change'}
 798         ]
 799     });
 800
 801     /**
 802      * Basic Window
 803      */
 804     Ext.createWidget('window', {
 805         x: 690, y: 1290,
 806
 807         width   : 450,
 808         // height  : 360,
 809         minWidth: 450,
 810
 811         title: 'Window',
 812
 813         bodyPadding: '5 5 0 5',
 814
 815         collapsible: true,
 816         closable   : false,
 817         draggable  : false,
 818         resizable: { handles: 's' },
 819         animCollapse: true,
 820
 821         items: [
 822             {
 823                 xtype : 'fieldset',
 824                 title : 'Plain Fieldset',
 825                 items: [
 826                     {
 827                         fieldLabel: 'TextField',
 828                         xtype     : 'textfield',
 829                         name      : 'someField',
 830                         emptyText : 'Enter a value',
 831                         anchor    : '100%'
 832                     },
 833                     {
 834                         fieldLabel: 'ComboBox',
 835                         xtype     : 'combo',
 836                         store     : ['Foo', 'Bar'],
 837                         anchor    : '100%'
 838                     },
 839                     {
 840                         fieldLabel: 'DateField',
 841                         xtype     : 'datefield',
 842                         name      : 'date',
 843                         anchor    : '100%'
 844                     },
 845                     {
 846                         fieldLabel: 'TimeField',
 847                         name      : 'time',
 848                         xtype     : 'timefield',
 849                         anchor    : '100%'
 850                     },
 851                     {
 852                         fieldLabel: 'NumberField',
 853                         xtype     : 'numberfield',
 854                         name      : 'number',
 855                         emptyText : '(This field is optional)',
 856                         allowBlank: true,
 857                         anchor    : '100%'
 858                     },
 859                     {
 860                         fieldLabel: 'TextArea',
 861                         xtype     : 'textareafield',
 862                         name      : 'message',
 863                         cls       : 'x-form-valid',
 864                         value     : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)',
 865                         anchor    : '100%'
 866                     },
 867                     {
 868                         fieldLabel: 'Checkboxes',
 869                         xtype: 'checkboxgroup',
 870                         columns: [100,100],
 871                         items: [
 872                             {boxLabel: 'Foo', checked: true,id:'fooChk1',inputId:'fooChkInput1'},
 873                             {boxLabel: 'Bar'}
 874                         ]
 875                     },
 876                     {
 877                         xtype: 'radiogroup',
 878                         columns: [100,100],
 879                         fieldLabel: 'Radio Group',
 880                         items: [
 881                             {boxLabel: 'Radio A', checked: true, name: 'radiogrp2'},
 882                             {boxLabel: 'Radio B', name: 'radiogrp2'}
 883                         ]
 884                     }
 885                 ]
 886             }
 887         ],
 888
 889         buttons: [
 890             {
 891                 text   : 'Submit',
 892                 handler: function() {
 893                     Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
 894                 }
 895             }
 896         ]
 897     }).show();
 898
 899     for (var i = 0; i < items.length; i++) {
 900         items[i].style = {
 901             position: 'absolute'
 902         };
 903         var item = Ext.ComponentManager.create(items[i], 'panel');
 904         item.render(document.body);
 905     }
 906
 907     setTimeout(function() {
 908         Ext.QuickTips.init();
 909         progressbar.wait({
 910             text: 'Progress text...'
 911         });
 912     }, 7000);
 913
 914     /**
 915      * Stylesheet Switcher
 916      */
 917     Ext.get('styleswitcher_select').on('change', function(e, select) {
 918         var name = select[select.selectedIndex].value,
 919             currentPath = window.location.pathname,
 920             isCurrent = currentPath.match(name);
 921
 922         if (!isCurrent) {
 923             window.location = name;
 924         }
 925     });
 926 });
 927