examples/window/window.js

   1 Ext.require([
   2     'Ext.window.Window',
   3     'Ext.tab.*',
   4     'Ext.toolbar.Spacer',
   5     'Ext.layout.container.Card',
   6     'Ext.layout.container.Border'
   7 ]);
   8
   9 Ext.onReady(function(){
  10     var floater, constrainedWin, constrainedWin2;
  11
  12     Ext.util.Region.override({
  13         colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
  14         nextColor: 0,
  15         show: function(){
  16             var style = {
  17                 display: 'block',
  18                 position: 'absolute',
  19                 top: this.top + 'px',
  20                 left: this.left + 'px',
  21                 height: ((this.bottom - this.top) + 1) + 'px',
  22                 width: ((this.right - this.left) + 1) + 'px',
  23                 opacity: 0.3,
  24                 'pointer-events': 'none',
  25                 'z-index': 9999999
  26             };
  27             if (!this.highlightEl) {
  28                 style['background-color'] = this.colors[this.nextColor];
  29                 Ext.util.Region.prototype.nextColor++;
  30                 this.highlightEl = Ext.getBody().createChild({
  31                     style: style
  32                 });
  33                 if (this.nextColor >= this.colors.length) {
  34                     this.nextColor = 0;
  35                 }
  36             } else {
  37                 this.highlightEl.setStyle(style);
  38             }
  39         },
  40         hide: function(){
  41             if (this.highlightEl) {
  42                 this.highlightEl.setStyle({
  43                     display: 'none'
  44                 });
  45             }
  46         }
  47     });
  48
  49     var win2 = Ext.create('widget.window', {
  50         height: 200,
  51         width: 400,
  52         x: 450,
  53         y: 450,
  54         title: 'Constraining Window, plain: true',
  55         closable: false,
  56         plain: true,
  57         layout: 'fit',
  58         items: [floater = Ext.create('Ext.Component', {
  59             xtype: 'component',
  60             floating: {
  61                 shadow: false
  62             },
  63             height: 50,
  64             width: 50,
  65             x: 175,
  66             y: 75
  67         }), constrainedWin = Ext.create('Ext.Window', {
  68             title: 'Constrained Window',
  69             width: 100,
  70             height: 100,
  71             x: 20,
  72             y: 20,
  73             constrain: true,
  74             layout: 'fit',
  75             items: {
  76                 border: false
  77             }
  78         }), constrainedWin2 = Ext.create('Ext.Window', {
  79             title: 'Header-Constrained Win',
  80             width: 100,
  81             height: 100,
  82             x: 120,
  83             y: 120,
  84             constrainHeader: true,
  85             layout: 'fit',
  86             items: {
  87                 border: false
  88             }
  89         }),{
  90             border: false
  91         }]
  92     });
  93     win2.show();
  94     floater.show();
  95     constrainedWin.show();
  96     constrainedWin2.show();
  97
  98     Ext.create('Ext.Window', {
  99         title: 'Left Header, plain: true',
 100         width: 400,
 101         height: 200,
 102         x: 10,
 103         y: 200,
 104         plain: true,
 105         headerPosition: 'left',
 106         layout: 'fit',
 107         items: {
 108             border: false
 109         }
 110     }).show();
 111
 112     Ext.create('Ext.Window', {
 113         title: 'Right Header, plain: true',
 114         width: 400,
 115         height: 200,
 116         x: 450,
 117         y: 200,
 118         headerPosition: 'right',
 119         layout: 'fit',
 120         items: {
 121             border: false
 122         }
 123     }).show();
 124
 125     Ext.create('Ext.Window', {
 126         title: 'Bottom Header, plain: true',
 127         width: 400,
 128         height: 200,
 129         x: 10,
 130         y: 450,
 131         plain: true,
 132         headerPosition: 'bottom',
 133         layout: 'fit',
 134         items: {
 135             border: false
 136         }
 137     }).show();
 138 });