Tracking tabs will stop working in Webix 7.0. Use window.history API and events instead.
Here we discuss the state of an application created with multiview layout.
With multiview application design you can create as many cells as you wish and switch between them with the help of dedicated buttons, namely tabbar and segmented, or resort to tabview functionality.
Tab values coincide with IDs of the views you place into multiview cells.
Initially, either the first tab is visible, or the one you've set to be "selected" during initialization. Normally, when you refresh the page, the application is redrawn according to this initialization pattern.
webix.ui({
rows:[
{view:"segmented", id:'tabbar', selected:"listView", multiview:true,
options:[
{ value: 'List', id:'listView'},
{ value: 'Form', id:'formView'},
{ value: 'About', id:'aboutView'}
]
},
{cells:[
{id:"listView", view:"list"},
{id:"formView", view:"form"},
{id:"aboutView", view:"template"}]
}
]
});
Nevertheless, the library offers history API to store the current application state, or simply put, to memorize the latest opened tab.
History track method allows remembering the currently opened tab and showing it after page loading. It takes two parameters:
webix.history.track('tabbar');
There's also the onBeforeHistoryNav event which allows adding some actions while working with history. The event is called before history is applied.
$$("tabbar").attachEvent("onBeforeHistoryNav", function(){
//... some code here ...
});
The event is cancelable: returning false will cancel changes in the view.
Each time you click the tab to switch for another cell, a hashbang URL is generated on the base of cell ID (under http://current_url.html#!/cellID pattern) and memorized. You'll see it in the url bar of your browser.
If for the track() function you define the url parameter as cell ID, this cell will always be shown after refresh. If you don't specify this parameter, the last opened cell will be displayed.
Compare ID-s from the snippet above and hashbang URL-s for each of the tabs on the picture.
Now, each time, you refresh the page, the url will be formed according to the info stored in the state object and the latest opened tab will be shown.
In addition, there exists a possibility to add a new state to history with the dedicated push() method. Its arguments are:
The method is applied to history object:
webix.history.push("tabbar", "detailView" "details");
..where details are:
var details = {
view:"template",
template:"Some very long text"
};
However, this will cause the URL bar to display http://current_url.html#!/detailView, but won't cause the browser to look for detailView anchor or even check whether it exists. It just adds this info to window history object.
You can disable current history tracking process by calling the method again in some moment of the application flow:
webix.history.track("tabbar");
..
//disables history tracking for tabbar
webix.history.track();
In addition, you can set another view as a history tracking master:
webix.history.track("tabbar1");
..
//disables history tracking for tabbar1 and starts tracking tabbar2
webix.history.track("tabbar2");
Back to top