Window

API Reference

Overview

Window is a UI-related component that looks like a standard on-screen window. It inherits from view, but differs from other components in its character. It lies not within your app's layout but above other components. The same is true about popup.

Initialization

webix.ui({
    view:"window",
    head:"My Window",
    body:{
        template:"Some text"
    }
});

Comments:

A standard window contains the head and body sections. However, the head can be set to false if you don't need it;
To make the window visible, you should apply the show() method after its initialization;
A movable window contains the move:true property in its constructor;
By default windows are non-modal. When such a window is focused, it can be closed with the 'Esc' hotkey. Modality is described below.

Working with Window

Head

The head differs from the window body in style and may contain:

a text header that is set as a string or template
a text header with the "close" icon
a toolbar with any controls.

To add the "close" icon, set the close property to true:

webix.ui({
    view:"window",
    head:"You can close the window",
    close:true,     body:{ template:"Window content" }
});

If you define the header as a toolbar and want to add the "close" icon, you also need to add a click handler to make it close the window:

webix.ui({
    view:"window", id:"win",
    head:{
        view:"toolbar", elements:[
            { template:"You can close the window" },
            { view:"icon", icon:"wxi-close", click:function(){
                $$("win").hide();
            } }
        ]
    },
    body:{ template:"Window content" }
});

Close vs Hide

Clicking the close icon is equivalent to the hide() method call. Both hide a window meaning that you can show it back via the dedicated show() method when needed.

Meanwhile the close() method completely destroys the window. You cannot show the destroyed window back.

So choose wisely between hiding and destroying:

the close property or hide() method if you need to hide the window
the close() method to completely remove your window from the app.

Body

This section may contain any view.

Text template is set by initializing template component. It can be defined without direct initialization as {template:"some text"}.

Window with Datatable

webix.ui({
    view:"window",
    body:{
        view:"datatable",
        // ...
    }
})

Window Sizing and Positioning

The sizes are set by the width and height properties. If you do not specify them, the window will adjust to the dimension of the component in the body or will take default values (if the internal component has no dimension).

Furthermore, Webix window has various methods for setting its position. All of them are described in a separate documentation article.

Window Resizing

Window can be resized by a user in a browser with the help of a resizer icon in the right bottom corner of the window.

To enable this possibility, you need to include the resize property with the true value into the window configuration.

Related sample: Windows: Resize

Window Modality

Modality is a feature of the UI-widget that can affect the work of an application and control user-app interaction. Alert and Confirm message boxes are always modal.

Once a modal window is shown, it waits for actions (e.g. enter data, press the button, etc.) and unless it is closed one ways or another, the user cannot interact with other components on the page.

UI-related Window is non-modal by default. You can make it modal with the modal property:

{view:"window", modal:true}

When a modal window is initialized, the app area turns gray to indicate that it is disabled, while you are "communicating" with the window.

How to use Window over IFrame Content

You can also show Window above Iframe, though the app functionality will be somewhat limited. IFrame intercepts all events, so that a window initialized over an iframe can't work correctly. To fix this, you can use one the following workarounds:

either use a modal window:

webix.ui({
    view:"window", move:true,
    position:"center", head:"Drag me",
    modal:true,      body:{
        template:"Any issues with fluency?"
    }
}).show();
 
webix.ui({
    rows:[
        {view:'iframe',src:'//docs.webix.com'}
    ]
});

or disable the IFrame view while the window is active:

webix.ui({
    view:"window", id:"window",
    // full config
});
 
webix.ui({
    rows:[
        {id:"frame", view:'iframe',src:'//docs.webix.com'}
    ]
});
 
$$("frame").disable();  $$("window").show();

Related sample: Disable IFrame