Injecting a JetView into a tabview or a multiview

Hello,

I can't figure out how to insert a JetView into a tabview or multivien.
Their respective methods addView expect a jsonConfig object to build the new view, so, I've tried many things without success.

Here are the 2 views involved:

// form.js
import { JetView } from "webix-jet";

export default class ViewForm extends JetView {
    config() {
        return {
            template: "My form"
        }
    };

    init() {
        //...
    }
}


// main.js
import { JetView } from "webix-jet";
import ViewForm from "./form";

export default class ViewMain extends JetView {
    config() {

        var tabbar = {
            id: "app-tab-bar",
            view: "tabbar",
            multiview: true,
            options: [
                { value: 'First tab', id: 'app-nav', close: false, width: 320 }
            ]
        };

        var ui = {
            id: "app-root",
            cells: [{
                id: "app-nav",
                template: "Content of tab 1"
            }]
        };

        return {
            rows: [
                tabbar
                ui,
            ]
        }
    }
}

How can I add my JetView in the multiview?

The following works (badly) and is a horrible hack. Furthermore, when we do this, we lose the benefits of the JetView api (auto init, events...) :

let form = new ViewForm();
let formConfig = form.config();

// Add a new content area
$$("app-root").addView(formConfig);

// Add a new tab
$$("app-tab-bar").addOption(formConfig.id, formConfig.id.toString(), true);

So, what's the proper way to add a JetView in to a multiview layout?

Comments

  • edited December 2017

    Still stuggling to insert a JetView inside a 'multiview' layout (also a Jetview).
    The method 'addview' of multiview only takes objects as parameter, but can't take an instantiated Jetview.

    Any thought concerning the method to achieve this properly?
    I couldn't find any examples on the forum or stackoverflow.

  • try getRoot()
    $multiview.addView(this.getRoot())

  • edited December 2017

    Thank your for your answer. I've tried it, but it give me the same result => this.getRoot() only returns the root config element of the view.

    What I'd like to do is to insert some Jetviews in the cells of a multiview, to be able to use the Jetview API for each inserted view.

  • It works for me in the similar scenario.
    Can you share some code?

  • Hello,

    The code of the 2 Jetviews is above, and below is the code I'm currently using to insert the 'ViewForm' JetView into the 'ViewMain' JetView.

    It works, but it's a workaround because I should not instantiate the JetView by myself using the 'new' keyword.

    The result here is a 'fake' Jetview where I'm only using the config property to feed the addView method.

    let form = new ViewForm();  // <= Jetview I want to insert in a cell
    let formConfig = form.config();
    
    // Add a new CELL to the multiview 'MainView'
    $$("app-root").addView(formConfig);
    
    // Add also a new tab
    $$("app-tab-bar").addOption(formConfig.id, formConfig.id.toString(), true);
    

    Error using this syntax:

    $$("app-root").addView(form.getRoot());
    
    => webix_debug.js:4592 Uncaught TypeError: Cannot read property 'container' of undefined
    

    Error using this syntax:

    $$("app-root").addView(ViewForm.getRoot());
    
    => __WEBPACK_IMPORTED_MODULE_0__view_form__.default.getRoot is not a function
    

    Instead, what I would like to do is simply to add the Jetview itself in the multiview cell. Something like this:

    $$("app-root").addView(ViewForm);
    

    But the addView method doesn't support it.

    It would be great if the snippet tool could accept Webix Jet testing! We could share code directly...

  • edited December 2017

    my working code is

    var form = this.ui(ViewForm);
    var formRoot = form.getRoot();
    var tabConfig = {
        id: formRoot.config.id,
        value: formRoot.config.id.toString() // "Header"
    };
    $$("app-tab-bar").addOption(tabConfig);
    $$("app-root").addView(formRoot);
    
  • Okay, thanks, I didn't try the "this.ui(ViewForm)" to instantiate my JetView. It may work better this way. I have to test it.

  • Great! It's working.
    The trick was to use this.ui(...)

    Thanks a lot for your help.

  • edited February 10

    Hi there,

    just a quick question on the above problem.
    Ive faced the exact problem.My solution was also the same as David_Grossi's solution of "fake" jetview class, with its own methods.

    let form = new ViewForm(); // <= Jetview I want to insert in a cell
    let formConfig = form.config();

    // Add a new CELL to the multiview 'MainView'
    $$("app-root").addView(formConfig);

    // Add also a new tab
    $$("app-tab-bar").addOption(formConfig.id, formConfig.id.toString(), true);

    while that works, i was wondering if there could be an advantage of forcing the "Jetview" method proposed.

  • Hello @faseel,

    while that works, i was wondering if there could be an advantage of forcing the "Jetview" method proposed.

    While there is no substantial difference between the two methods (as both of them will work), the solution provided by intregal is the preferred way to go. This is due to the fact that this method utilises Webix Jet API instead of relying on the standart JS methods (i.e. this.ui() method is used to correctly instantiate a JetView class, instead using the new() method).

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!