examples/themes/themes.js

   1 Ext.require([
   2     'Ext.window.Window',
   3     'Ext.panel.Panel',
   4     'Ext.toolbar.*',
   5     'Ext.container.Viewport',
   6     'Ext.form.*',
   7     'Ext.tab.*',
   8     'Ext.slider.*',
   9     'Ext.layout.*',
  10     'Ext.button.*',
  11     'Ext.grid.*',
  12     'Ext.data.*',
  13     'EXt.util.*'
  14 ]);
  15
  16 Ext.onReady(function() {
  17     Ext.QuickTips.init();
  18
  19     var items = [];
  20
  21     /**
  22      * Basic panel
  23      */
  24     items.push({
  25         xtype: 'panel',
  26
  27         x: 50, y: 100,
  28
  29         width : 150,
  30         height: 150,
  31
  32         title: 'Basic Panel',
  33         animCollapse: true,
  34         bodyPadding: 5,
  35         html       : 'Some content',
  36         collapsible: true
  37     });
  38
  39     /**
  40      * Masked Panel
  41      */
  42     items.push({
  43         xtype: 'panel',
  44
  45         x: 210, y: 100,
  46
  47         width : 150,
  48         height: 150,
  49
  50         title: 'Masked Panel',
  51
  52         bodyPadding: 5,
  53         html       : 'Some content',
  54         animCollapse: true,
  55         collapsible: true,
  56
  57         listeners: {
  58             render: function(p) {
  59                 p.body.mask('Loading...');
  60             },
  61             delay: 50
  62         }
  63     });
  64
  65     /**
  66      * Framed Panel
  67      */
  68     items.push({
  69         xtype: 'panel',
  70
  71         x: 370, y: 100,
  72
  73         width : 150,
  74         height: 150,
  75
  76         title: 'Framed Panel',
  77         animCollapse: true,
  78
  79         dockedItems: [{
  80             dock: 'top',
  81             xtype: 'toolbar',
  82             items: [{
  83                 text: 'test'
  84             }]
  85         }, {
  86             dock: 'right',
  87             xtype: 'toolbar',
  88             items: [{
  89                 text: 'test'
  90             }]
  91         }, {
  92             dock: 'left',
  93             xtype: 'toolbar',
  94             items: [{
  95                 text: 'test'
  96             }]
  97         }],
  98
  99         html       : 'Some content',
 100         frame      : true,
 101         collapsible: true
 102     });
 103
 104     /**
 105      * Basic Window
 106      */
 107     Ext.createWidget('window', {
 108         x: 530, y: 100,
 109
 110         width   : 150,
 111         height  : 150,
 112         minWidth: 150,
 113
 114         title: 'Window',
 115
 116         bodyPadding: 5,
 117         html       : 'Click Submit for Confirmation Msg.',
 118
 119         collapsible: true,
 120         closable   : false,
 121         draggable  : false,
 122         resizable: false,
 123         animCollapse: true,
 124
 125         tbar: [
 126             {text: 'Toolbar'}
 127         ],
 128         buttons: [
 129             {
 130                 text   : 'Submit',
 131                 id     : 'message_box',
 132                 handler: function() {
 133                     Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
 134                 }
 135             }
 136         ]
 137     }).show();
 138
 139     /**
 140      * Toolbar with a menu
 141      */
 142     var menu = Ext.createWidget('menu', {
 143         items: [
 144             {text: 'Menu item'},
 145             {text: 'Check 1', checked: true},
 146             {text: 'Check 2', checked: false},
 147             '-',
 148             {text: 'Option 1', checked: true,  group: 'opts'},
 149             {text: 'Option 2', checked: false, group: 'opts'},
 150             '-',
 151             {
 152                 text: 'Sub-items',
 153                 menu: Ext.createWidget('menu', {
 154                     items: [
 155                         {text: 'Item 1'},
 156                         {text: 'Item 2'}
 157                     ]
 158                 })
 159             }
 160         ]
 161     });
 162
 163     items.push({
 164         xtype: 'panel',
 165
 166         x: 690, y: 100,
 167
 168         width : 450,
 169         height: 150,
 170
 171         title: 'Basic Panel With Toolbars',
 172
 173         tbar: [
 174             'Toolbar &amp; Menus',
 175             ' ',
 176             '-',
 177             {text: 'Button'},
 178             {
 179                 text: 'Menu Button',
 180                 id  : 'menu-btn',
 181                 menu: menu
 182             },
 183             {
 184                 xtype: 'splitbutton',
 185                 text : 'Split Button',
 186                 menu : Ext.createWidget('menu', {
 187                     items: [
 188                         {text: 'Item 1'},
 189                         {text: 'Item 2'}
 190                     ]
 191                 })
 192             },
 193             {
 194                 xtype       : 'button',
 195                 enableToggle: true,
 196                 pressed     : true,
 197                 text        : 'Toggle Button'
 198             }
 199         ],
 200         bbar: [
 201             {text: 'Bottom Bar'}
 202         ]
 203     });
 204
 205     /**
 206      * Form and form widgets
 207      */
 208     items.push({
 209         xtype: 'form',
 210
 211         id   : 'form-widgets',
 212         title: 'Form Widgets',
 213
 214         x: 50, y: 260,
 215
 216         width : 630,
 217         height: 700,
 218         frame: true,
 219
 220         tools: [
 221             {type:'toggle'},
 222             {type:'close'},
 223             {type:'minimize'},
 224             {type:'maximize'},
 225             {type:'restore'},
 226             {type:'gear'},
 227             {type:'pin'},
 228             {type:'unpin'},
 229             {type:'right'},
 230             {type:'left'},
 231             {type:'up'},
 232             {type:'down'},
 233             {type:'refresh'},
 234             {type:'minus'},
 235             {type:'plus'},
 236             {type:'help'},
 237             {type:'search'},
 238             {type:'save'},
 239             {type:'print'}
 240         ],
 241
 242         bodyPadding: '10 20',
 243
 244         defaults: {
 245             anchor    : '98%',
 246             msgTarget : 'side',
 247             allowBlank: false
 248         },
 249
 250         items: [
 251             {
 252                 xtype: 'label',
 253                 text : 'Plain Label'
 254             },
 255             {
 256                 fieldLabel: 'TextField',
 257                 xtype     : 'textfield',
 258                 name      : 'someField',
 259                 emptyText : 'Enter a value'
 260             },
 261             {
 262                 fieldLabel: 'ComboBox',
 263                 xtype: 'combo',
 264                 store: ['Foo', 'Bar']
 265             },
 266             {
 267                 fieldLabel: 'DateField',
 268                 xtype     : 'datefield',
 269                 name      : 'date'
 270             },
 271             {
 272                 fieldLabel: 'TimeField',
 273                 name: 'time',
 274                 xtype: 'timefield'
 275             },
 276             {
 277                 fieldLabel: 'NumberField',
 278                 xtype     : 'numberfield',
 279                 name      : 'number',
 280                 emptyText : '(This field is optional)',
 281                 allowBlank: true
 282             },
 283             {
 284                 fieldLabel: 'TextArea',
 285                 xtype     : 'textareafield',
 286                 name      : 'message',
 287                 cls       : 'x-form-valid',
 288                 value     : 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
 289             },
 290             {
 291                 fieldLabel: 'Checkboxes',
 292                 xtype: 'checkboxgroup',
 293                 columns: [100,100],
 294                 items: [{boxLabel: 'Foo', checked: true},{boxLabel: 'Bar'}]
 295             },
 296             {
 297                 fieldLabel: 'Radios',
 298                 xtype: 'radiogroup',
 299                 columns: [100,100],
 300                 items: [{boxLabel: 'Foo', checked: true, name: 'radios'},{boxLabel: 'Bar', name: 'radios'}]
 301             },
 302             {
 303                 hideLabel   : true,
 304                 id          : 'htmleditor',
 305                 xtype       : 'htmleditor',
 306                 name        : 'html',
 307                 enableColors: false,
 308                 value       : 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
 309                 height      : 110
 310             },
 311             {
 312                 xtype : 'fieldset',
 313                 title : 'Plain Fieldset'
 314             },
 315             {
 316                 xtype      : 'fieldset',
 317                 title      : 'Collapsible Fieldset',
 318                 collapsible: true
 319             },
 320             {
 321                 xtype         : 'fieldset',
 322                 title         : 'Checkbox Fieldset',
 323                 checkboxToggle: true
 324             }
 325         ],
 326
 327         buttons: [
 328             {
 329                 text   :'Toggle Enabled',
 330                 handler: function() {
 331                     this.up('form').items.each(function(item) {
 332                         item.setDisabled(!item.disabled);
 333                     });
 334                 }
 335             },
 336             {
 337                 text   : 'Reset Form',
 338                 handler: function() {
 339                     Ext.getCmp('form-widgets').getForm().reset();
 340                 }
 341             },
 342             {
 343                 text   : 'Validate',
 344                 handler: function() {
 345                     Ext.getCmp('form-widgets').getForm().isValid();
 346                 }
 347             }
 348         ]
 349     });
 350
 351     /**
 352      * Border layout
 353      */
 354     items.push({
 355         xtype: 'panel',
 356
 357         width : 450,
 358         height: 350,
 359
 360         x: 690, y: 260,
 361
 362         title : 'BorderLayout Panel',
 363         layout: 'border',
 364
 365         defaults: {
 366             collapsible: true,
 367             split      : true
 368         },
 369
 370         items: [
 371             {
 372                 title  : 'North',
 373                 region : 'north',
 374                 html   : 'North',
 375                 ctitle : 'North',
 376                 margins: '5 5 0 5',
 377                 height : 70
 378             },
 379             {
 380                 title       : 'South',
 381                 region      : 'south',
 382                 html        : 'South',
 383                 collapseMode: 'mini',
 384                 margins     : '0 5 5 5',
 385                 height      : 70
 386             },
 387             {
 388                 title       : 'West',
 389                 region      : 'west',
 390                 html        : 'West',
 391                 collapseMode: 'mini',
 392                 margins     : '0 0 0 5',
 393                 width       : 100
 394             },
 395             {
 396                 title  : 'East',
 397                 region : 'east',
 398                 html   : 'East',
 399                 margins: '0 5 0 0',
 400                 width  : 100
 401             },
 402             {
 403                 title      : 'Center',
 404                 region     : 'center',
 405                 collapsible: false,
 406                 html       : 'Center'
 407             }
 408         ]
 409     });
 410
 411     /**
 412      * Grid
 413      */
 414      var myData = [
 415          ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
 416          ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
 417          ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
 418          ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
 419          ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
 420          ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
 421          ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
 422          ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
 423          ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
 424          ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am']
 425      ];
 426
 427     var store = Ext.create('Ext.data.ArrayStore', {
 428         fields: [
 429            {name: 'company'},
 430            {name: 'price', type: 'float'},
 431            {name: 'change', type: 'float'},
 432            {name: 'pctChange', type: 'float'},
 433            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
 434         ],
 435         sorters: {
 436             property : 'company',
 437             direction: 'ASC'
 438         },
 439         data: myData,
 440         pageSize: 8
 441     });
 442
 443     var pagingBar = Ext.createWidget('pagingtoolbar', {
 444         store      : store,
 445         displayInfo: true,
 446         displayMsg : 'Displaying topics {0} - {1} of {2}'
 447     });
 448
 449     items.push({
 450         xtype: 'gridpanel',
 451
 452         height: 200,
 453         width : 450,
 454
 455         x: 690, y: 620,
 456
 457         title: 'GridPanel',
 458
 459         store: store,
 460
 461         columns: [
 462             {header: "Company",      flex: 1, sortable: true, dataIndex: 'company'},
 463             {header: "Price",        width: 75,  sortable: true, dataIndex: 'price'},
 464             {header: "Change",       width: 75,  sortable: true, dataIndex: 'change'},
 465             {header: "% Change",     width: 75,  sortable: true, dataIndex: 'pctChange'},
 466             {header: "Last Updated", width: 85,  sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
 467         ],
 468         loadMask        : true,
 469
 470         viewConfig: {
 471             stripeRows: true
 472         },
 473
 474         bbar: pagingBar,
 475         tbar: [
 476             {text: 'Toolbar'},
 477             '->',
 478             {
 479                 xtype: 'triggerfield',
 480                 trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
 481                 trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
 482             }
 483         ]
 484     });
 485
 486     //=============================================================
 487     // Accordion / Tree
 488     //=============================================================
 489     var tree = Ext.create('Ext.tree.Panel', {
 490         title: 'TreePanel',
 491         root: {
 492             text: 'Root Node',
 493             expanded: true,
 494             children: [{
 495                 text: 'Item 1',
 496                 leaf: true
 497             }, {
 498                 text: 'Item 2',
 499                 leaf: true
 500             }, {
 501                 text: 'Folder',
 502                 children: [{
 503                     text: 'Item 3',
 504                     leaf: true
 505                 }]
 506             }]
 507         }
 508     });
 509
 510     var accConfig = {
 511         title : 'Accordion and TreePanel',
 512         layout: 'accordion',
 513
 514         x: 690, y: 830,
 515
 516         width : 450,
 517         height: 240,
 518
 519         bodyStyle: {
 520             'background-color': '#eee'
 521         },
 522
 523         items: [
 524             tree, {
 525                 title: 'Item 2',
 526                 html: 'Some content'
 527             }, {
 528                 title: 'Item 3',
 529                 html : 'Some content'
 530             }
 531         ]
 532     };
 533
 534     items.push(accConfig);
 535
 536     /**
 537      * Tabs
 538      */
 539     var tabCfg = {
 540         xtype: 'tabpanel',
 541
 542         width : 310,
 543         height: 150,
 544
 545         activeTab: 0,
 546
 547         defaults: {
 548             bodyStyle: 'padding:10px;'
 549         },
 550
 551         items: [
 552             {
 553                 title: 'Tab 1',
 554                 html : 'Free-standing tab panel'
 555             },
 556             {
 557                 title   : 'Tab 2',
 558                 closable: true
 559             },
 560             {
 561                 title   : 'Tab 3',
 562                 closable: true
 563             }
 564         ]
 565     };
 566
 567     items.push(Ext.applyIf({
 568         x: 50, y: 970,
 569
 570         enableTabScroll: true,
 571
 572         items: [
 573             {
 574                 title: 'Tab 1',
 575                 html : 'Tab panel for display in a border layout'
 576             },
 577             {
 578                 title   : 'Tab 2',
 579                 closable: true
 580             },
 581             {
 582                 title   : 'Tab 3',
 583                 closable: true
 584             },
 585             {
 586                 title   : 'Tab 4',
 587                 closable: true
 588             },
 589             {
 590                 title   : 'Tab 5',
 591                 closable: true
 592             },
 593             {
 594                 title   : 'Tab 6',
 595                 closable: true
 596             }
 597         ]
 598     }, tabCfg));
 599
 600     items.push(Ext.apply({
 601         plain: true,
 602         x    : 370, y: 970
 603     }, tabCfg));
 604
 605     /**
 606      * DatePicker
 607      */
 608     items.push({
 609         xtype: 'panel',
 610
 611         x: 50, y: 1130,
 612
 613         border: false,
 614         width : 180,
 615
 616         items: {
 617             xtype: 'datepicker'
 618         }
 619     });
 620
 621     //=============================================================
 622     // Resizable
 623     //=============================================================
 624     var rszEl = Ext.getBody().createChild({
 625         style: 'background: transparent;',
 626         html: '<div style="padding:20px;">Resizable handles</div>'
 627     });
 628
 629     rszEl.position('absolute', 1, 240, 1130);
 630     rszEl.setSize(180, 180);
 631     Ext.create('Ext.resizer.Resizer', {
 632         el: rszEl,
 633         handles: 'all',
 634         pinned: true
 635     });
 636
 637     /**
 638      * ProgressBar / Slider
 639      */
 640     var progressbar = Ext.createWidget('progressbar', {
 641         value: 0.5
 642     });
 643
 644     items.push({
 645         xtype: 'panel',
 646         title: 'ProgressBar / Slider',
 647
 648         x: 690, y: 1080,
 649
 650         width: 450,
 651         height: 200,
 652
 653         bodyPadding: 5,
 654         layout     : {
 655             type : 'vbox',
 656             align: 'stretch'
 657         },
 658
 659         items: [
 660             progressbar,
 661             {
 662                 xtype    : 'slider',
 663                 hideLabel: true,
 664                 value    : 50,
 665                 margin   : '5 0 0 0'
 666             },
 667             {
 668                 xtype   : 'slider',
 669                 vertical: true,
 670                 value   : 50,
 671                 height  : 100,
 672                 margin  : '5 0 0 0'
 673             }
 674         ]
 675     });
 676
 677     items.push({
 678         width:250,
 679         height:182,
 680         x: 430, y: 1130,
 681         collapsible: false,
 682         xtype: 'gridpanel',
 683         title: 'Framed Grid',
 684         store: store,
 685         multiSelect: true,
 686         emptyText: 'No images to display',
 687         frame: true,
 688         enableColumnMove: false,
 689         columns: [
 690             {header: "Company",      flex: 1, sortable: true, dataIndex: 'company'},
 691             {header: "Price",        width: 75,  sortable: true, dataIndex: 'price'},
 692             {header: "Change",       width: 75,  sortable: true, dataIndex: 'change'}
 693         ]
 694     });
 695
 696     Ext.createWidget('viewport', {
 697         layout: 'absolute',
 698         autoScroll: true,
 699         items: items
 700     });
 701
 702     progressbar.wait({
 703         text: 'Progress text...'
 704     });
 705
 706     /**
 707      * Stylesheet Switcher
 708      */
 709     Ext.get('styleswitcher_select').on('change', function(e, select) {
 710         var name = select[select.selectedIndex].value,
 711             currentPath = window.location.pathname,
 712             isCurrent = currentPath.match(name);
 713
 714         if (!isCurrent) {
 715             window.location = name;
 716         }
 717     });
 718 });