add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / window / window.js

Ext.require([\r
    'Ext.window.Window',\r
    'Ext.tab.*',\r
    'Ext.toolbar.Spacer',\r
    'Ext.layout.container.Card',\r
    'Ext.layout.container.Border'\r
]);\r
\r
Ext.onReady(function(){\r
    var constrainedWin, constrainedWin2;\r
    \r
    Ext.util.Region.override({\r
        colors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],\r
        nextColor: 0,\r
        show: function(){\r
            var style = {\r
                display: 'block',\r
                position: 'absolute',\r
                top: this.top + 'px',\r
                left: this.left + 'px',\r
                height: ((this.bottom - this.top) + 1) + 'px',\r
                width: ((this.right - this.left) + 1) + 'px',\r
                opacity: 0.3,\r
                'pointer-events': 'none',\r
                'z-index': 9999999\r
            };\r
            if (!this.highlightEl) {\r
                style['background-color'] = this.colors[this.nextColor];\r
                Ext.util.Region.prototype.nextColor++;\r
                this.highlightEl = Ext.getBody().createChild({\r
                    style: style\r
                });\r
                if (this.nextColor >= this.colors.length) {\r
                    this.nextColor = 0;\r
                }\r
            } else {\r
                this.highlightEl.setStyle(style);\r
            }\r
        },\r
        hide: function(){\r
            if (this.highlightEl) {\r
                this.highlightEl.setStyle({\r
                    display: 'none'\r
                });\r
            }\r
        }\r
    });\r
\r
    var win2 = Ext.create('widget.window', {\r
        height: 200,\r
        width: 400,\r
        x: 450,\r
        y: 450,\r
        title: 'Constraining Window, plain: true',\r
        closable: false,\r
        plain: true,\r
        layout: 'fit',\r
        items: [constrainedWin = Ext.create('Ext.Window', {\r
            title: 'Constrained Window',\r
            width: 200,\r
            height: 100,\r
\r
            // Constraining will pull the Window leftwards so that it's within the parent Window\r
            x: 1000,\r
            y: 20,\r
            constrain: true,\r
            layout: 'fit',\r
            items: {\r
                border: false\r
            }\r
        }), constrainedWin2 = Ext.create('Ext.Window', {\r
            title: 'Header-Constrained Win',\r
            width: 200,\r
            height: 100,\r
            x: 120,\r
            y: 120,\r
            constrainHeader: true,\r
            layout: 'fit',\r
            items: {\r
                border: false\r
            }\r
        }),{\r
            border: false\r
        }]\r
    });\r
    win2.show();\r
    constrainedWin.show();\r
    constrainedWin2.show();\r
\r
    Ext.create('Ext.Window', {\r
        title: 'Left Header, plain: true',\r
        width: 400,\r
        height: 200,\r
        x: 10,\r
        y: 200,\r
        plain: true,\r
        headerPosition: 'left',\r
        layout: 'fit',\r
        items: {\r
            border: false\r
        }\r
    }).show();\r
\r
    Ext.create('Ext.Window', {\r
        title: 'Right Header, plain: true',\r
        width: 400,\r
        height: 200,\r
        x: 450,\r
        y: 200,\r
        headerPosition: 'right',\r
        layout: 'fit',\r
        items: {\r
            border: false\r
        }\r
    }).show();\r
\r
    Ext.create('Ext.Window', {\r
        title: 'Bottom Header, plain: true',\r
        width: 400,\r
        height: 200,\r
        x: 10,\r
        y: 450,\r
        plain: true,\r
        headerPosition: 'bottom',\r
        layout: 'fit',\r
        items: {\r
            border: false\r
        }\r
    }).show();\r
});\r