show a view

Webix JS
#1

Hello
this is my code

var menuEsterno = {
	view: "menu", id: "menuEsterno",
	width: 180, layout: "y", select: true,
	template: "<span class='webix_icon fa-#icon#'></span> #value# ",
	data: [
		{ value: "Dashboard", id: "start", icon: "briefcase" },
		{ value: "tablet", id: "mydash", icon: "arrows" },
		{ value: "GridLayout", id: "mygrid", icon: "user" },
		{ value: "processi", id: "data", icon: "envelope-o" },
		{ value: "test", id: "widgets", icon: "briefcase" }
	],
	click: (id) => {
		this.show(id); //this work
	},
	on: {
		onMenuItemClick: function (id) {
			this.show(id); //this don't work
		}
	}
};

I don’t understand why in “onMenuItemClick” the function show don’t work

#2

Hello,
Please check the sample https://snippet.webix.com/63j61bj5
show method only makes the component visible.
You can get the id by this.getMenuItem(id).id

#3

I use Jet framework and when the user click on a menu item, the relative view should be show in the {$subview:true}.
If I use

click: (id) => {
        this.show(id); //this work
    },

the correct page is show
even if I use

on: {
        onMenuItemClick: function (id) {
            this.show(id); //this don't work
        }
    }

the correct page isn’t show, and I don’t understand why

#4

Okey,
Please try this.$scope.show(id)
Here is more information. Maybe it helps you to solve it.

#5

I have this error
myapp.js:13026 Uncaught TypeError: Cannot read property ‘show’ of null
at result.click (myapp.js:13026)
at result._call_onclick (webix_debug.js:10695)
at result.callEvent (webix_debug.js:575)
at result._mouseEvent (webix_debug.js:6806)
at result._onClick (webix_debug.js:6726)
at HTMLDivElement. (webix_debug.js:248)

#6

I try to use your example
// views/toolbar.js
const Toolbar = {
view: “toolbar”,
elements: [
{ view: “label”, label: “Demo” },
{ view: “button”, value:“details”,
click: () => {
this.show(“data”);
}
}]
};
export default Toolbar;

but it doesn’t work, this is the error:

sources/views/top.js
219:13-20 "export ‘toolbar’ was not found in ‘views/toolbar’
@ ./sources/views/top.js
@ ./sources/views ^\.\/.*$
@ ./node_modules/webix-jet/dist/JetApp.js
@ ./node_modules/webix-jet/dist/index.js
@ ./sources/myapp.js
@ multi (webpack)-dev-server/client?http://localhost:8080 ./sources/myapp.js

but if I change your code with this:

// views/toolbar.js
export const toolbar = {
view: “toolbar”,
elements: [
{ view: “label”, label: “Demo” },
{
view: “button”, value: “details”,
click: () => {
this.show(“data”);
}
}]
};
//export default Toolbar;

the toolbar is correctly show but the button don’t work

#7

the error is show only if I use the menu variable into a sidemenu.
If I use it in a cols layout all works fine.
Why?
I found that in sidemenu the property $scope of “this” is nothing

#8

If you export a view as default, you need to import it as default, i.e. without { }
If you want to call methods of JetView class, you need to declare your Jet view as a class that extends JetView. A simple object view does not have methods like show().
For example

Class looks like

import {JetView} from "webix-jet";

export default class Toolbar extends JetView {
    config(){
        return {
            view: "toolbar",
            elements: [
                { view: "label", label: "Demo" },
                { view: "button", value:"details",
                    click: () => {
                        this.show("data");
                    }
                }
            ]
        };
    }
}

import Toolbar from "views/toolbar.js";

import {JetView, plugins} from "webix-jet";
import Toolbar from "views/toolbar.js";


export default class TopView extends JetView{
 config(){
  return {
   rows:[
    Toolbar,
    { 
        cols:[
            { $subview:true } 
        ]
    }
   ]
  };
 }
}

And please check this: Page not found - Webix Jet

#9

In addition,
Sidemenu inherits its API from the popup, so it have to be declared correspondingly, while the logic of switching views has to be defined for its content - ui.list, for example.
Please check the following examples: