Jetview in a window

Hi,

** I repost this because I think it was not the right place to put my question in the comments of another thread… **

I’ve upgraded to Webix Jet 1.0.6 but I’m not sure how to reproduce your code. I’ve tried different things without success.

// The Jetview to embed in a window
import { JetView } from "webix-jet";

export default class MyEmbeddedJetview  extends JetView {
    config() {
        return {
            template: "This should be embedded in a window"
        };
    }

    show(target) {
        this.getRoot().show(target);
    }
}

Then I define the container Jetview:

// The Jetview that should embed the first one
import { JetView } from "webix-jet";
import MyEmbeddedJetview  from "./myJetview";

export default class MyContainerJetview extends JetView {
    config() {
        return {
            // ...
        }
    }

    init() {
        const winTest = {
            view: "window",
            position: "center",
            width: 300,
            height: 200,
            body: {
                rows: [
                    { template: "hello" },
                    { template: "world" } // TEST 1:  works fine
                ]
            }
        };

        this.winTest= this.ui(winTest);
    }
}

TEST 2: same window with a Jetview embedded => this does not work:

        const winTest = {
            view: "window",
            position: "center",
            width: 300,
            height: 200,
            body: {
                rows: [
                    { template: "hello" },
                    MyEmbeddedJetview // TEST 2 : the window is blank
                ]
            }
        };

show() has to be applied to a window that you need to show.
Please check a simple example of adding the extra JetView to the window:

/* app.js */
import {JetApp, JetView} from "webix-jet";

class small extends JetView {
	config(){
		return {
			template:"Will I appear?"
		};
	}
};

class some extends JetView {
	config(){
		return {
			view:"popup", position:"center", body:{
				rows:[
					{ template:"Hello" },
					small
				]
			}
		};
	}
	showWindow(){
		this.getRoot().show();
	}
};

class direct extends JetView {
	config() {
		return {
			rows:[
				{ template:"Allowed #1" },
				{ view:"button", value:"Show Window", click: () => {
					this.win.showWindow();
				} }
			]
		}
	}
	init(){
		this.win = this.ui(some);
	}
};

webix.ready(() => {
	const app = new JetApp({
		id:			"windows",
		start:		"/direct",
		views:{
			direct:	direct
		}
	});

	app.render();
});

Okay, I’ll try this way. Thank you!

Perfect, it’s working, thanks for your help!

Prior to version 1.2, the window widget must be wrapped into the separate view to work correctly.

Starting from version 1.2 you can use above approach, or mix common Webix config and Jet Views ( so both your original code and code provided by @Listopad will work correctly )

https://webix.com/snippet/13b67670

This is really great!
Thank you Maksim.

Hi, I noticed that when using a JetView within a webix.ui.window, it is not destroyed. How can I make sure it will be destroyed?
see: Code Snippet