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