Dynamic Multiview Route Navigation with Tabbar on Webix Jet

Webix JS
#1

Hello,

I am trying to achieve Multiview Tabbar navigation in Webix Jet like this screenshot: https://habrastorage.org/files/f51/b8f/84f/f51b8f84f314413d8251f1362f516634.gif

What i need is when i click on the menus, the route user clicked is should open in a new tab with close button. All other tab contents should not removed and its contents should persisted

And i want persistent non-closeable “welcome” tab on every page.

But i couldnt do it, current code removes other tab contents when i click to a menu, and when i open a route in another window, welcome tab is gone, it doesnt open a new tab but writes route contents to “welcome”

How can i achieve that?

index.js: https://snippet.webix.com/9yq1pz1h
app.js: https://snippet.webix.com/td84fkbp
welcome.js: https://snippet.webix.com/uykbzh43
pageone.js: https://snippet.webix.com/u11u7d1g
pagetwo.js: https://snippet.webix.com/xw4t9t5q

By the way, there is a bug in minTabWidth, width calculator doesnt add Close icon size to calculation so it would give overflows on long texts with short minTabWidths

@annazankevich @Helga @Dzmitry @intregal @Listopad

#2

try to implement something like this
https://snippet.webix.com/60plo26n

#3

@intregal i cant use it when i seperate view files like views/home.js: https://snippet.webix.com/v353vv65

it shows empty page

#4

The core navigation in Jet app is usually based on the dynamic subviews, i.e. only currently visible JetViews exist on a page.
The Multiview component preserves initialized cells in DOM and allows to interact with them. To combine both methods, you can use a multiview with a set of static subviews inside.
Please, download and check the code the following demo (the Multiview with tabs is implemented on the Start page):

https://files.webix.com/30d/77ae5419e5384d8ef1629216dc3b5919/jet-start-multiview-demo.zip

  • the multiview contains one static tab,
  • other tabs exist with the corresponding views,
  • each new tab contains a static subview (an instance of the same JetView class)

This app is based on the common jet-start repo. To run it, call

npm install
npm start

Due to the dynamic structure of the Jet SAP, this multiview will be destroyed and reset when you switch to another page (e.g. “Data”).
If you need to restore it, the app will need to maintain the some related state (for example, a model which will store info about currently other tabs).