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