WEBIX JET uses only single webix.ui ?

Webix JS
1

I realized that all the modules are added in single webix.ui and generated page:

// views/start
var start = {
  template:"Start page"
};

// views/top
var header = {
    type:"header", template: 'TEST'
};

var menu = {
    view:"menu",
    width:180, layout:"y", select:true,
    template:"<span class='webix_icon fa-#icon#'></span> #value# ",
    data:[
        { value:"DashBoard", 		id:"start",		icon:"envelope-o" },
        { value:"Data", 			id:"data",		icon:"briefcase" }
    ]
};

var ui = {
    type:"line", cols:[
        { type:"clean", css:"app-left-panel", padding:10, margin:20, borderless:true, rows: [ header, menu ]},
        { type:"clean", css:"app-right-panel", padding:4, rows:[ start ]}
    
    ]
};

webix.ui( ui );

So, how to create a menu from this example with WEBIX JET? It uses double webix.ui

2

Try this, change top.js to :
http://webix.com/snippet/50dd4015

3

finzaiko, sorry, but you don’t understand my question :frowning:

I need SideMenu, not SideBar

SideMenu has the following CSS property { position: fixed; }. And it smoothly covers the main component.

But SideBar resizes the main component.

4

Im sorry look similar, I’v tried sidemenu on webixjet not working got unknown view:sidemenu, I dont know exacly couldbe need more sidemenujs in lib folder

5

Yep, the whole layout is initialized via a single webix.ui() call. At the same time, widgets that lie above layout (windows and popups) can be initialized in two ways:

$ui:{}, 
$oninit:function(view, $scope){
    $scope.ui({view:"sidemenu", id:"win1"}).show();
}

Check “Using scope” at Page not found - Webix Jet in the end.

$ui:{},
$oninit:function(){   $$("win1").show(); },
$windows:[  { view:"sidemenu", id:"win1" } ]

Check “Creating popups with $windows” at Page not found - Webix Jet

And also please check Webix version in the app, it should be 3.1 or higher for Sidemenu to be accessible. You can update Webix files in the libs/webix/codebase folder.

6

What is the relation between sidemenu and data from the records model?

the $oninit function specifies that data from the records model will be loaded into the view after its creation.

And that is $scope.ui()?

Can you give the list of all methods $scope ?

7

The $oninit handler actually contains all the actions you’d like to perform with this application part, e.g. load data into desired widgets, show or hide them, initialize dialog windows, etc…

The $scope.ui is an equivalent to webix.ui. But the difference is that windows initialized within the $scope will be destroyed automatically when the related view is destroyed and are no longer kept in memory.

Another useful method of $scope is on, which allows to attach an event handler that will also be destroyed with view destruction:

{ view:"segmented", options:[ ], on:{  onChange:app.action("detailsModeChanged"); }}
...
$oninit:function(view, $scope){ 
     $scope.on(app, "detailsModeChanged", function(mode){});
}

Check “Triggering events” at Page not found - Webix Jet