Optimus Multiple Windows of same View

Suite and Optimus
#1

How to show multiple Windows of the same View in DHX Optimus?
If I use this.show(null, WindowView) it opens the Window which is returned from the View WindowView.
Then, if I use this.show(null, WindowView) again, it closes the first Window and opens the new one.

WindowView loosk like this:

import { View } from "dhx-optimus";
export class WindowView extends View {
  init() {
    this.win = new dhx.Window({
      title: 'Title'
    });
    return this.win;
  }
  ready() {
    this.win.show();
  }
}
#2

It is not available to open several instances of the same windowView.
In this case I can suggest you to create several window objects in the same view instead.
Something like:

import { View } from "dhx-optimus";

export class WindowView extends View {
    init() {
        this.window1 = new dhx.Window({
            title: "DHX Window1",
            resizable: true,
            movable: true,
			closable:true
        });
		this.window2 = new dhx.Window({
            title: "DHX Window 2",
            resizable: true,
            movable: true,
			closable:true
        });
    }
    ready() {
        console.log("DHX Window is ready");
        this.observe(
            state => state.active,	
            active => {
                if (active === "second") {
                    this.window1.show(50);
					this.window2.show(700);
                } else {
                    this.window1.hide();
					this.window2.hide();
                }
            }
        );
		
    }
    destroy() {
        console.log("DHX Window is destroy");
    }
}
#3

Hi, one of the ways I do it is to create a generic view for the window, and then through events I show the window and pass some component or view.

To do this I create the view with an attached layout to make it easier:

import { View } from "dhx-optimus";


export class WindowView extends View {
    init() {
        this.window = new dhx.Window({
            title: "DHX Window1",
            resizable: true,
            movable: true,
			closable:true
        });
        this.layout = new dhx.Layout(null, {
              rows: [
                {
                   id: "contentWindow"
                }
              ]
        });
        this.window.attach(this.layout);
        this.subscribe();
        return this.window;
    }
    subscribe() {
        this.on("WindowView-show", (show, SubView) => {
                if (show) {
                   this.window.show();
                   dhx.awaitRedraw().then(() => {
                       this.show(this.layout.getCell("contentWindow"), SubView, {}); // this mode if it is an optimus view component
                       // this.layout.getCell("contentWindow").attach(SubView); // this mode if it is a dhtmlx component (form, grid, dataview, etc)
                   });
                } else {
                  this.window.hide();
                }
        });
    }
}

This way you can use the same window in a generic way, of course you can make improvements in the code and implement it to adjust the window settings (you need to destroy and recreate the window in this case). I don’t know if this would be your need, but I hope it helps you.

1 Like