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"
    }
});

Related sample:  Windows: Basic Initialization

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;
  • a text header with the "close" icon;
  • a toolbar with any controls.

To add the "close" icon, set the close setting 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 / button, 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" }
});

Note that there are two functions to remove a window from the screen - close() and hide(). The first one completely removes the window from the app and there will be no way to show it back.

If you want to hide the window rather than remove it, use hide(). Later on, it can appear on the page if you call the show() method for it.

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",
        // ...
    }
})

Related sample:  Window with a Component Inside

Window Sizing and Positioning

The must-have parameters for the window are width and height. If you don't set them, the window will either be minimized or take the dimensions of the inner view (if they are set).

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'}
    ]
});

Related sample:  Modal window over IFrame

  • 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

Related Articles

Back to top