How to create subView inside any component

Webix JS
#1

As an example, I have a layout as below in my config methon in webix-jet:

{
        rows: [{
            view: "segmented",
            options: [
              { id: "subView1", value: "subView1" },
              { id: "subView2", value: "subView2" },
              { id: "subView3", value: "subView3" }
            ],
            on: {
              onChange: function(id){
                // here i want to replace my existing subView
              }
            }
          },
          {
            $subview: MySubView,
            name: "MySubView"
          }
        ]
      }

I want to replace my subview with different subview onChange method of ‘segmented’ view.

When my page is rendered 'MySubView" is being created. But when i want to change to another subView (“DifferentSubView”) , it is not being created.

#2

You can use common .show API. Just define a target when navigation the non-default subview. ( if a view has a single subview, you can remove the name from the subview config , and use .show without a second parameter )

this.show("someother", { target: "MySubView" });
#3

this is a similar snippet for my case
https://snippet.webix.com/17rys3b9

#4

can you please check it, i want to replace my subview 1 with subview 2

#5

Hello @takero ,

Please check the information here

There are several ways how you can solve it

For example, you can use multiview (multiview:true):
Sample: Code Snippet

Also, there is, maybe, more elegant solution like routing. You can use the show() method of app to switch views:
https://snippet.webix.com/7apgt1wy

You can read about it here:

#6

i know that multiview is an alternate solution, but my subviews in my project are very comlex and i dont want to handle them with multiview.

I just want it to be similar like in navigations so that each time my subviews are destroyed and be raplaced by new subview

#7

thanks

#8

Hello, Nastja

I used the routing solution which was the exact thing i was looking for.
i used this.show(“path to subview”) and is worked very well.

Now i want to call method of this subView. How can I access it and its methods?

#9

Now i want to call method of this subView. How can I access it and its methods?

show method returns a promise, from which you can use getSubView method to access the View object

this.show("./some").then(_ => this.getSubView().callSome() )