examples/themes/themes.js

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