partkeepr

fork of partkeepr
git clone https://git.e1e0.net/partkeepr.git
Log | Files | Refs | Submodules | README | LICENSE

ThemeTester.js (31623B)


      1 Ext.define("PartKeepr.ThemeTester", {
      2     extend: "Ext.panel.Panel",
      3     scrollable: true,
      4 
      5     initComponent: function () {
      6         this.isTouchTheme = window.theme === 'neptune-touch' || window.theme === 'crisp-touch';
      7         this.doThemes();
      8         this.callParent(arguments);
      9     },
     10 
     11     getBasicPanel: function () {
     12         return this.applySizing('basicPanel', {
     13             xtype: 'panel',
     14             title: 'Basic Panel',
     15             animCollapse: true,
     16             bodyPadding: 5,
     17             html: 'Some content'
     18         });
     19     },
     20 
     21     getCollapsedPanel: function () {
     22         return this.applySizing('collapsedPanel', {
     23             xtype: 'panel',
     24             title: 'Collapsed Panel',
     25             animCollapse: true,
     26             bodyPadding: 5,
     27             html: 'Some content',
     28             collapsible: true,
     29             collapsed: true
     30         });
     31     },
     32 
     33     getMaskedPanel: function () {
     34         return Ext.widget(this.applySizing('maskedPanel', {
     35             xtype: 'panel',
     36             title: 'Masked Panel',
     37             bodyPadding: 5,
     38             html: 'Some content',
     39             animCollapse: true,
     40             collapsible: true
     41         }));
     42     },
     43 
     44     getFramedPanel: function () {
     45         return this.applySizing('framedPanel', {
     46             xtype: 'panel',
     47             title: 'Framed Panel',
     48             animCollapse: true,
     49             dockedItems: [{
     50                 dock: 'top',
     51                 xtype: 'toolbar',
     52                 items: [{
     53                     text: 'test'
     54                 }]
     55             }, {
     56                 dock: 'right',
     57                 xtype: 'toolbar',
     58                 items: [{
     59                     text: 'test B'
     60                 }]
     61             }, {
     62                 dock: 'left',
     63                 xtype: 'toolbar',
     64                 items: [{
     65                     text: 'test A'
     66                 }]
     67             }],
     68             html: 'Some content',
     69             frame: true
     70         });
     71     },
     72 
     73     getCollapsedFramedPanel: function () {
     74         return this.applySizing('collapsedFramedPanel', {
     75             xtype: 'panel',
     76             title: 'Collapsed Framed Panel',
     77             animCollapse: true,
     78             bodyPadding: 5,
     79             bodyBorder: true,
     80             html: 'Some content',
     81             frame: true,
     82             collapsible: true,
     83             collapsed: true
     84         });
     85     },
     86 
     87     getPanelWithToolbars: function () {
     88         /**
     89          * Toolbar with a menu
     90          */
     91         return this.applySizing('panelWithToolbars', {
     92             xtype: 'panel',
     93             id: 'panelWithToolbars',
     94             title: 'Basic Panel With Toolbars',
     95             collapsible: true,
     96             tbar: {
     97                 id: 'panelWithToolbars_tbar',
     98                 items: [{
     99                     xtype: 'buttongroup',
    100                     title: 'Button Group',
    101                     id: 'panelWithToolbars_btngroup',
    102                     columns: 2,
    103                     defaults: {
    104                         scale: 'small'
    105                     },
    106                     items: [{
    107                         xtype: 'splitbutton',
    108                         text: 'Menu Button',
    109                         iconCls: 'add16',
    110                         menu: [{text: 'Menu Button 1'}]
    111                     }, {
    112                         xtype: 'splitbutton',
    113                         text: 'Cut',
    114                         icon: '../shared/icons/fam/cross.gif',
    115                         id: 'panelWithToolbars_splitbtn',
    116                         menu: [{text: 'Cut Menu Item'}]
    117                     }]
    118                 }]
    119             },
    120             bbar: {
    121                 id: 'panelWithToolbars_bbar',
    122                 items: ['Toolbar', ' ', '-', this.isTouchTheme ? null : {text: 'Button'}, {
    123                     text: 'Menu' + (this.isTouchTheme ? ' Button' : ''),
    124                     id: 'menu-btn',
    125                     menu: [{text: 'Menu item'},
    126                         {
    127                             text: 'Check 1',
    128                             checked: true
    129                         },
    130                         {
    131                             text: 'Check 2',
    132                             checked: false
    133                         },
    134                         '-',
    135                         {
    136                             text: 'Option 1',
    137                             checked: true,
    138                             group: 'opts'
    139                         },
    140                         {
    141                             text: 'Option 2',
    142                             checked: false,
    143                             group: 'opts'
    144                         },
    145                         '-',
    146                         {
    147                             text: 'Sub-items',
    148                             menu: Ext.widget('menu', {
    149                                 items: [{text: 'Item 1'}, {text: 'Item 2'}]
    150                             })
    151                         }]
    152                 }, {
    153                     xtype: 'splitbutton',
    154                     text: 'Split Button',
    155                     menu: Ext.widget('menu', {
    156                         items: [{text: 'Item 1'}, {text: 'Item 2'}]
    157                     })
    158                 }, {
    159                     xtype: 'button',
    160                     enableToggle: true,
    161                     pressed: true,
    162                     text: 'Toggle Button'
    163                 }]
    164             },
    165             lbar: {
    166                 id: 'panelWithToolbars_lbar',
    167                 items: [{text: 'Left'}]
    168             },
    169             rbar: {
    170                 id: 'panelWithToolbars_rbar',
    171                 items: [{text: 'Right'}]
    172             }
    173         });
    174     },
    175 
    176     getFormWidgets: function () {
    177         return this.applySizing('formWidgets', {
    178             xtype: 'form',
    179             id: 'form-widgets',
    180             title: 'Form Widgets',
    181             frame: true,
    182 
    183             tools: [{type: 'close'},
    184                 {type: 'minimize'},
    185                 {type: 'maximize'},
    186                 {type: 'restore'},
    187                 {type: 'gear'},
    188                 {type: 'pin'},
    189                 {type: 'unpin'},
    190                 {type: 'right'},
    191                 {type: 'left'},
    192                 {type: 'down'},
    193                 {type: 'refresh'},
    194                 {type: 'minus'},
    195                 {type: 'plus'},
    196                 {type: 'help'},
    197                 {type: 'search'},
    198                 {type: 'save'},
    199                 {type: 'print'}],
    200 
    201             bodyPadding: '10 20',
    202 
    203             defaults: {
    204                 anchor: '98%',
    205                 msgTarget: 'side',
    206                 allowBlank: false
    207             },
    208 
    209             items: [{
    210                 xtype: 'label',
    211                 text: 'Plain Label'
    212             }, {
    213                 fieldLabel: 'TextField',
    214                 xtype: 'textfield',
    215                 name: 'someField',
    216                 emptyText: 'Enter a value'
    217             }, {
    218                 fieldLabel: 'ComboBox',
    219                 xtype: 'combo',
    220                 store: ['Foo', 'Bar']
    221             }, {
    222                 fieldLabel: 'DateField',
    223                 xtype: 'datefield',
    224                 name: 'date'
    225             }, {
    226                 fieldLabel: 'TimeField',
    227                 name: 'time',
    228                 xtype: 'timefield'
    229             }, {
    230                 fieldLabel: 'NumberField',
    231                 xtype: 'numberfield',
    232                 name: 'number',
    233                 emptyText: '(This field is optional)',
    234                 allowBlank: true
    235             }, {
    236                 fieldLabel: 'TextArea',
    237                 xtype: 'textareafield',
    238                 name: 'message',
    239                 cls: 'x-form-valid',
    240                 value: 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)'
    241             }, {
    242                 fieldLabel: 'Checkboxes',
    243                 xtype: 'checkboxgroup',
    244                 columns: [100, 100],
    245                 items: [{
    246                     boxLabel: 'Foo',
    247                     checked: true,
    248                     id: 'fooChk',
    249                     inputId: 'fooChkInput'
    250                 }, {boxLabel: 'Bar'}]
    251             }, {
    252                 fieldLabel: 'Radios',
    253                 xtype: 'radiogroup',
    254                 columns: [100, 100],
    255                 items: [{
    256                     boxLabel: 'Foo',
    257                     checked: true,
    258                     name: 'radios'
    259                 },
    260                     {
    261                         boxLabel: 'Bar',
    262                         name: 'radios'
    263                     }]
    264             }, {
    265                 hideLabel: true,
    266                 id: 'htmleditor',
    267                 xtype: 'htmleditor',
    268                 name: 'html',
    269                 enableColors: false,
    270                 value: 'Mouse over toolbar for tooltips.<br /><br />The HTMLEditor IFrame requires a refresh between a stylesheet switch to get accurate colors.',
    271                 height: 110
    272             }, {
    273                 xtype: 'fieldset',
    274                 title: 'Plain Fieldset',
    275                 items: [{
    276                     hideLabel: true,
    277                     xtype: 'radiogroup',
    278                     items: [{
    279                         boxLabel: 'Radio A',
    280                         checked: true,
    281                         name: 'radiogrp2'
    282                     }, {
    283                         boxLabel: 'Radio B',
    284                         name: 'radiogrp2'
    285                     }]
    286                 }]
    287             }, {
    288                 xtype: 'fieldset',
    289                 title: 'Collapsible Fieldset',
    290                 collapsible: true,
    291                 items: [{
    292                     xtype: 'checkbox',
    293                     boxLabel: 'Checkbox 1'
    294                 },
    295                     {
    296                         xtype: 'checkbox',
    297                         boxLabel: 'Checkbox 2'
    298                     }]
    299             }, {
    300                 xtype: 'fieldset',
    301                 title: 'Checkbox Fieldset',
    302                 checkboxToggle: true,
    303                 items: [{
    304                     xtype: 'radio',
    305                     boxLabel: 'Radio 1',
    306                     name: 'radiongrp1'
    307                 }, {
    308                     xtype: 'radio',
    309                     boxLabel: 'Radio 2',
    310                     name: 'radiongrp1'
    311                 }]
    312             }],
    313 
    314             buttons: [{
    315                 text: 'Toggle Enabled',
    316                 handler: function () {
    317                     this.up('form').items.each(function (item) {
    318                         item.setDisabled(!item.disabled);
    319                     });
    320                 }
    321             }, {
    322                 text: 'Reset Form',
    323                 handler: function () {
    324                     Ext.getCmp('form-widgets').getForm().reset();
    325                 }
    326             }, {
    327                 text: 'Validate',
    328                 handler: function () {
    329                     Ext.getCmp('form-widgets').getForm().isValid();
    330                 }
    331             }]
    332         });
    333     },
    334     getBorderLayout: function () {
    335         var padding = {
    336             classic: 5,
    337             partkeepr: 5,
    338             gray: 5,
    339             triton: 10,
    340             'neptune-touch': 16,
    341             'crisp-touch': 16
    342         };
    343 
    344         return this.applySizing('borderLayout', {
    345             xtype: 'panel',
    346             title: 'BorderLayout Panel',
    347             layout: {
    348                 type: 'border',
    349                 padding: padding[Ext.themeName] || 8 // match padding to theme splitter size
    350             },
    351             collapsible: true,
    352 
    353             defaults: {
    354                 collapsible: true,
    355                 split: true
    356             },
    357 
    358             items: [{
    359                 title: 'North',
    360                 region: 'north',
    361                 html: 'North',
    362                 height: this.isTouchTheme ? 100 : 70
    363             }, {
    364                 title: 'South',
    365                 region: 'south',
    366                 html: 'South',
    367                 collapseMode: 'mini',
    368                 height: this.isTouchTheme ? 100 : 70
    369             }, {
    370                 title: 'West',
    371                 region: 'west',
    372                 html: 'West',
    373                 collapseMode: 'mini',
    374                 width: this.isTouchTheme ? 150 : 100
    375             }, {
    376                 title: 'East',
    377                 region: 'east',
    378                 html: 'East',
    379                 width: this.isTouchTheme ? 150 : 100
    380             }, {
    381                 title: 'Center',
    382                 region: 'center',
    383                 collapsible: false,
    384                 html: 'Center'
    385             }]
    386         });
    387     },
    388 
    389     getStore: function () {
    390         // Reverse order data should get sorted by the MemoryProxy
    391         var myData = [['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'],
    392             ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
    393             ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
    394             ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
    395             ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
    396             ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
    397             ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
    398             ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
    399             ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
    400             ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am']];
    401 
    402         return Ext.create('Ext.data.ArrayStore', {
    403             fields: [{name: 'company'},
    404                 {
    405                     name: 'price',
    406                     type: 'float',
    407                     convert: null
    408                 },
    409                 {
    410                     name: 'change',
    411                     type: 'float',
    412                     convert: null
    413                 },
    414                 {
    415                     name: 'pctChange',
    416                     type: 'float',
    417                     convert: null
    418                 },
    419                 {
    420                     name: 'lastChange',
    421                     type: 'date',
    422                     dateFormat: 'n/j h:ia'
    423                 }],
    424             sorters: {
    425                 property: 'company',
    426                 direction: 'ASC'
    427             },
    428             data: myData,
    429             pageSize: 8
    430         });
    431     },
    432 
    433     getGrid: function () {
    434         var store = this.getStore(),
    435             pagingBar = Ext.widget('pagingtoolbar', {
    436                 store: store,
    437                 displayInfo: true,
    438                 displayMsg: 'Displaying topics {0} - {1} of {2}'
    439             });
    440 
    441         return this.applySizing('grid', {
    442             xtype: 'gridpanel',
    443             title: 'GridPanel',
    444             collapsible: true,
    445 
    446             store: store,
    447 
    448             columns: [{
    449                 header: "Company",
    450                 flex: 1,
    451                 sortable: true,
    452                 dataIndex: 'company'
    453             },
    454                 {
    455                     header: "Price",
    456                     width: 75,
    457                     sortable: true,
    458                     dataIndex: 'price'
    459                 },
    460                 {
    461                     header: "Change",
    462                     width: this.isTouchTheme ? 90 : 80,
    463                     sortable: true,
    464                     dataIndex: 'change'
    465                 },
    466                 {
    467                     header: "% Change",
    468                     width: this.isTouchTheme ? 105 : 95,
    469                     sortable: true,
    470                     dataIndex: 'pctChange'
    471                 },
    472                 {
    473                     header: "Last Updated",
    474                     width: this.isTouchTheme ? 130 : 110,
    475                     sortable: true,
    476                     xtype: 'datecolumn',
    477                     dataIndex: 'lastChange'
    478                 }],
    479             loadMask: true,
    480 
    481             bbar: pagingBar,
    482             tbar: [{text: 'Toolbar'}, '->', {
    483                 xtype: 'triggerfield',
    484                 trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
    485                 trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
    486             }]
    487         });
    488     },
    489     getAccordion: function () {
    490         var tree = Ext.create('Ext.tree.Panel', {
    491             title: 'TreePanel',
    492             root: {
    493                 text: 'Root Node',
    494                 expanded: true,
    495                 children: [{
    496                     text: 'Item 1',
    497                     leaf: true
    498                 }, {
    499                     text: 'Item 2',
    500                     leaf: true
    501                 }, {
    502                     text: 'Folder',
    503                     children: [{
    504                         text: 'Item 3',
    505                         leaf: true
    506                     }]
    507                 }]
    508             }
    509         });
    510 
    511         return this.applySizing('accordion', {
    512             title: 'Accordion and TreePanel',
    513             collapsible: true,
    514             layout: 'accordion',
    515 
    516             items: [tree, {
    517                 title: 'Item 2',
    518                 html: 'Some content'
    519             }, {
    520                 title: 'Item 3',
    521                 html: 'Some content'
    522             }]
    523         });
    524     },
    525 
    526     getTabs: function (config) {
    527         return Ext.apply({
    528             xtype: 'tabpanel',
    529             activeTab: 0,
    530             defaults: {
    531                 bodyPadding: 10
    532             },
    533 
    534             items: [{
    535                 title: 'Tab 1',
    536                 html: 'Free-standing tab panel'
    537             }, {
    538                 title: 'Tab 2',
    539                 closable: true
    540             }, {
    541                 title: 'Tab 3',
    542                 closable: true
    543             }]
    544         }, config);
    545     },
    546 
    547     getScrollingTabs: function () {
    548         return this.applySizing('scrollingTabs', this.getTabs({
    549             enableTabScroll: true,
    550             plain: true,
    551             items: [{
    552                 title: 'Tab 1',
    553                 html: 'Tab panel 1 content'
    554             }, {
    555                 title: 'Tab 2',
    556                 html: 'Tab panel 2 content',
    557                 closable: true
    558             }, {
    559                 title: 'Tab 3',
    560                 html: 'Tab panel 3 content',
    561                 closable: true
    562             }, {
    563                 title: 'Tab 4',
    564                 html: 'Tab panel 4 content',
    565                 closable: true
    566             }, {
    567                 title: 'Tab 5',
    568                 html: 'Tab panel 5 content',
    569                 closable: true
    570             }, {
    571                 title: 'Tab 6',
    572                 html: 'Tab panel 6 content',
    573                 closable: true
    574             }]
    575         }));
    576     },
    577 
    578     getPlainTabs: function () {
    579         return this.applySizing('plainTabs', this.getTabs({
    580             plain: true
    581         }));
    582     },
    583 
    584     getDatePicker: function () {
    585         return this.applySizing('datePicker', {
    586             xtype: 'panel',
    587             border: false,
    588             items: {
    589                 xtype: 'datepicker'
    590             }
    591         });
    592     },
    593 
    594     getProgressBar: function () {
    595         var progressbar = Ext.widget('progressbar', {
    596             value: 0.5
    597         });
    598 
    599 
    600         setTimeout(function () {
    601             progressbar.wait({
    602                 //animate: true,
    603                 text: 'Progress text...'
    604             });
    605         }, 7000);
    606 
    607 
    608         return this.applySizing('progressBar', {
    609             xtype: 'panel',
    610             title: 'ProgressBar / Slider',
    611             bodyPadding: this.isTouchTheme ? 10 : 5,
    612             layout: 'anchor',
    613 
    614             items: [progressbar, {
    615                 xtype: 'slider',
    616                 hideLabel: true,
    617                 value: 50,
    618                 margin: '5 0 0 0',
    619                 anchor: '100%'
    620             }, {
    621                 xtype: 'slider',
    622                 vertical: true,
    623                 value: 50,
    624                 height: this.isTouchTheme ? 200 : 100,
    625                 margin: '5 0 0 0'
    626             }]
    627         });
    628     },
    629 
    630     getFramedGrid: function () {
    631         return this.applySizing('framedGrid', {
    632             xtype: 'grid',
    633             title: 'Framed Grid',
    634             collapsible: true,
    635             store: this.getStore(),
    636             multiSelect: true,
    637             emptyText: 'No images to display',
    638             frame: true,
    639             enableColumnMove: false,
    640             columns: [{
    641                 header: "Company",
    642                 flex: 1,
    643                 sortable: true,
    644                 dataIndex: 'company'
    645             },
    646                 {
    647                     header: "Price",
    648                     width: this.isTouchTheme ? 90 : 75,
    649                     sortable: true,
    650                     dataIndex: 'price'
    651                 },
    652                 {
    653                     header: "Change",
    654                     width: this.isTouchTheme ? 90 : 75,
    655                     sortable: true,
    656                     dataIndex: 'change'
    657                 }]
    658         });
    659     },
    660 
    661     getBasicWindow: function () {
    662         return Ext.widget('window', this.applySizing('basicWindow', {
    663             id: 'basicWindow',
    664             hidden: false,
    665             title: 'Window',
    666             bodyPadding: 5,
    667             html: 'Click Submit for Confirmation Msg.',
    668             collapsible: true,
    669             floating: false,
    670             closable: false,
    671             draggable: false,
    672             resizable: {handles: 's'},
    673             animCollapse: true,
    674 
    675             tbar: [{text: 'Toolbar'}],
    676             buttons: [{
    677                 text: 'Submit',
    678                 id: 'message_box',
    679                 handler: function () {
    680                     Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
    681                 }
    682             }]
    683         }));
    684     },
    685 
    686     getResizer: function () {
    687         return Ext.widget(this.applySizing('resizer', {
    688             xtype: 'component',
    689             style: 'background:transparent;overflow:hidden;',
    690             html: '<div style="margin:20px">Resizable handles</div>',
    691             resizable: {
    692                 handles: 'all',
    693                 pinned: true
    694             }
    695         }));
    696     },
    697 
    698     addFormWindow: function () {
    699         Ext.widget('window', {
    700             x: 660,
    701             y: 1230,
    702 
    703             width: 450, // height  : 360,
    704             minWidth: 450,
    705 
    706             title: 'Window',
    707 
    708             bodyPadding: '5 5 0 5',
    709 
    710             collapsible: true,
    711             closable: false,
    712             draggable: false,
    713             resizable: {handles: 's'},
    714             animCollapse: true,
    715 
    716             items: [{
    717                 xtype: 'fieldset',
    718                 title: 'Plain Fieldset',
    719                 items: [{
    720                     fieldLabel: 'TextField',
    721                     xtype: 'textfield',
    722                     name: 'someField',
    723                     emptyText: 'Enter a value',
    724                     anchor: '100%'
    725                 }, {
    726                     fieldLabel: 'ComboBox',
    727                     xtype: 'combo',
    728                     store: ['Foo', 'Bar'],
    729                     anchor: '100%'
    730                 }, {
    731                     fieldLabel: 'DateField',
    732                     xtype: 'datefield',
    733                     name: 'date',
    734                     anchor: '100%'
    735                 }, {
    736                     fieldLabel: 'TimeField',
    737                     name: 'time',
    738                     xtype: 'timefield',
    739                     anchor: '100%'
    740                 }, {
    741                     fieldLabel: 'NumberField',
    742                     xtype: 'numberfield',
    743                     name: 'number',
    744                     emptyText: '(This field is optional)',
    745                     allowBlank: true,
    746                     anchor: '100%'
    747                 }, {
    748                     fieldLabel: 'TextArea',
    749                     xtype: 'textareafield',
    750                     name: 'message',
    751                     cls: 'x-form-valid',
    752                     value: 'This field is hard-coded to have the "valid" style (it will require some code changes to add/remove this style dynamically)',
    753                     anchor: '100%'
    754                 }, {
    755                     fieldLabel: 'Checkboxes',
    756                     xtype: 'checkboxgroup',
    757                     columns: [100, 100],
    758                     items: [{
    759                         boxLabel: 'Foo',
    760                         checked: true,
    761                         id: 'winFooChk',
    762                         inputId: 'winFooChkInput'
    763                     }, {boxLabel: 'Bar'}]
    764                 }, {
    765                     xtype: 'radiogroup',
    766                     columns: [100, 100],
    767                     fieldLabel: 'Radio Group',
    768                     items: [{
    769                         boxLabel: 'Radio A',
    770                         checked: true,
    771                         name: 'radiogrp2'
    772                     }, {
    773                         boxLabel: 'Radio B',
    774                         name: 'radiogrp2'
    775                     }]
    776                 }]
    777             }],
    778 
    779             buttons: [{
    780                 text: 'Submit',
    781                 handler: function () {
    782                     Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?');
    783                 }
    784             }]
    785         }).show();
    786     },
    787 
    788     sizing: {
    789         mainContainer: {
    790             classic: [1130, 1460],
    791             neptune: [1250, 1600],
    792             'neptune-touch': [790, 4140]
    793         },
    794         basicPanel: {
    795             classic: [150, 90, 20, 20],
    796             neptune: [150, 130, 20, 20],
    797             'neptune-touch': [250, 150, 0, 0]
    798         },
    799         collapsedPanel: {
    800             classic: [150, 70, 20, 120],
    801             neptune: [150, 120, 20, 160],
    802             'neptune-touch': [250, 150, 0, 170]
    803         },
    804         maskedPanel: {
    805             classic: [130, 170, 180, 20],
    806             neptune: [130, 260, 180, 20],
    807             'neptune-touch': [230, 320, 270, 0]
    808         },
    809         framedPanel: {
    810             classic: [170, 100, 320, 20],
    811             neptune: [200, 150, 320, 20],
    812             'neptune-touch': [270, 150, 520, 0]
    813         },
    814         collapsedFramedPanel: {
    815             classic: [170, 60, 320, 130],
    816             neptune: [200, 100, 320, 180],
    817             'neptune-touch': [270, 150, 520, 170]
    818         },
    819         basicWindow: {
    820             classic: [150, 170, 500, 20, {
    821                 minWidth: 150,
    822                 minHeight: 150,
    823                 maxHeight: 170
    824             }],
    825             neptune: [150, 260, 530, 20, {
    826                 minWidth: 150,
    827                 minHeight: 200,
    828                 maxHeight: 260
    829             }],
    830             'neptune-touch': [250, 260, 0, 340, {
    831                 minWidth: 150,
    832                 minHeight: 200,
    833                 maxHeight: 260
    834             }]
    835         },
    836         panelWithToolbars: {
    837             classic: [450, 170, 660, 20],
    838             neptune: [500, 260, 690, 20],
    839             'neptune-touch': [520, 260, 270, 340]
    840         },
    841         formWidgets: {
    842             classic: [630, 750, 20, 200],
    843             neptune: [660, 750, 20, 290],
    844             triton: [660, 1000, 20, 290],
    845             'neptune-touch': [790, 940, 0, 620]
    846         },
    847         borderLayout: {
    848             classic: [450, 350, 660, 200],
    849             neptune: [500, 350, 690, 290],
    850             'neptune-touch': [790, 500, 0, 1580]
    851         },
    852         grid: {
    853             classic: [450, 200, 660, 560],
    854             neptune: [500, 200, 690, 650],
    855             triton: [500, 300, 690, 650],
    856             'neptune-touch': [790, 400, 0, 2100]
    857         },
    858         accordion: {
    859             classic: [450, 240, 660, 770],
    860             neptune: [500, 240, 690, 860],
    861             triton: [500, 340, 690, 960],
    862             'neptune-touch': [790, 340, 0, 2520]
    863         },
    864         scrollingTabs: {
    865             classic: [310, 150, 20, 960],
    866             neptune: [325, 150, 20, 1050],
    867             triton: [325, 150, 20, 1300],
    868             'neptune-touch': [420, 200, 0, 2880]
    869         },
    870         plainTabs: {
    871             classic: [310, 150, 340, 960],
    872             neptune: [325, 150, 355, 1050],
    873             triton: [325, 150, 355, 1300],
    874             'neptune-touch': [350, 200, 440, 2880]
    875         },
    876         datePicker: {
    877             classic: [180, undefined, 20, 1120],
    878             neptune: [212, undefined, 20, 1210],
    879             triton: [310, undefined, 20, 1460],
    880             'neptune-touch': [282, undefined, 0, 3780]
    881         },
    882         progressBar: {
    883             classic: [450, 200, 660, 1020],
    884             neptune: [500, 200, 690, 1110],
    885             triton: [500, 220, 690, 1310],
    886             'neptune-touch': [790, 340, 0, 3100]
    887         },
    888         framedGrid: {
    889             classic: [450, 180, 660, 1230],
    890             neptune: [500, 180, 690, 1320],
    891             triton: [500, 280, 690, 1540],
    892             'neptune-touch': [790, 300, 0, 3460]
    893         },
    894         resizer: {
    895             classic: [440, 220, 210, 1120],
    896             neptune: [440, 220, 240, 1210],
    897             triton: [340, 220, 340, 1460],
    898             'neptune-touch': [488, 314, 302, 3780]
    899         }
    900     },
    901 
    902     theme: "",
    903 
    904     getSizing: function (id) {
    905         var theme = window.theme,
    906             info;
    907 
    908         if (theme === 'gray' || theme === "partkeepr")
    909         {
    910             // same dimensions
    911             theme = 'classic';
    912         }
    913 
    914         info = this.sizing[id][theme];
    915         if (!info && theme === 'crisp')
    916         {
    917             // default to neptune for crisp
    918             info = this.sizing[id]['neptune'];
    919         }
    920         if (!info && theme === 'triton')
    921         {
    922             // default to neptune for triton
    923             info = this.sizing[id]['neptune'];
    924         }
    925         if (!info && theme === 'crisp-touch')
    926         {
    927             // default to neptune-touch for crisp
    928             info = this.sizing[id]['neptune-touch'];
    929         }
    930 
    931         return info;
    932     },
    933 
    934     applySizing: function (id, config) {
    935 
    936         var info = this.getSizing(id),
    937             keys = ['width', 'height', 'x', 'y'],
    938             len = keys.length,
    939             i = 0,
    940             val;
    941 
    942         if (info)
    943         {
    944             for (; i < len; ++i)
    945             {
    946                 val = info[i];
    947                 if (val !== undefined)
    948                 {
    949                     config[keys[i]] = val;
    950                 }
    951             }
    952 
    953             // Any other config options
    954             Ext.applyIf(config, info[len]);
    955         }
    956 
    957         return config;
    958     },
    959 
    960     doThemes: function () {
    961         var time = Ext.perf.getTimestamp(),
    962             maskedPanel;
    963 
    964         var items = [this.getBasicPanel(),
    965             this.getCollapsedPanel(),
    966             maskedPanel = this.getMaskedPanel(),
    967             this.getFramedPanel(),
    968             this.getCollapsedFramedPanel(),
    969             this.getBasicWindow(),
    970             this.getPanelWithToolbars(),
    971             this.getFormWidgets(),
    972             this.getBorderLayout(),
    973             this.getGrid(),
    974             this.getAccordion(),
    975             this.getScrollingTabs(),
    976             this.getPlainTabs(),
    977             this.getDatePicker(),
    978             this.getProgressBar(),
    979             this.getFramedGrid(),
    980             this.getResizer(),
    981             0 // end of list (makes commenting out any of the above easy
    982         ];
    983         items.pop(); // remove the 0 on the end
    984 
    985         main = Ext.create('Ext.container.Container', this.applySizing('mainContainer', {
    986             id: 'main-container',
    987             layout: 'absolute',
    988             items: items
    989         }));
    990 
    991 
    992         this.items = main;
    993 
    994         //addFormWindow();
    995 
    996         setTimeout(function () {
    997             // we may comment out the creation of this for testing
    998             if (maskedPanel)
    999             {
   1000                 maskedPanel.setLoading({
   1001                     msg: 'Loading...',
   1002                     useTargetEl: true
   1003                 });
   1004             }
   1005 
   1006 
   1007             Ext.QuickTips.init();
   1008 
   1009         }, 2000);
   1010 
   1011         time = Ext.perf.getTimestamp() - time;
   1012         Ext.log('total time: ' + Math.round(time));
   1013     },
   1014 
   1015     statics: {
   1016         iconCls: 'fugue-icon ui-combo-box-blue',
   1017         title: i18n('Theme Tester'),
   1018         closable: true,
   1019         menuPath: [{text: i18n("View")},
   1020             {
   1021                 text: i18n("Developers"),
   1022                 iconCls: "fugue-icon toolbox"
   1023             }]
   1024     }
   1025 });
   1026 
   1027