Help with Webix Jet

Webix JS
1

I all
i’m quite new about webix… i’m try to play with Webix Jet, but i have some difficult;
my purpose is to display a datatable and then clicking in a “pencil” image (in the row) display (fow now) a form …
keep in mind i’m try this with webis Jet
this my data01.js (that display datatable, and it works like i want)

import {JetView} from “webix-jet”;
import {data01} from “models/records01”;
import details from “views/details.js”;

export default class DataView01 extends JetView{
config(){
return { view:“datatable”,
select:true,
columns :[
{ id:“id”},
{id:“title”},
{id:“year”},
{id:“votes”},
{id:“rating”},
{id:“rank”},
{view: “icon”,
template:"",
width: 40}
] ,
onClick:{
“fa-pencil”:function(e,id){
this.app.show("/details");
},
}
};
}
init(view){
view.parse(data01);
this.details = this.ui(details);
}
}

This is details.js (that should be displayed when i click on “pencil”, but instead i receive this error: “Cannot read property ‘show’ of undefined”

// views/details.js
import {JetView} from “webix-jet”;

export default class details extends JetView{
config() {
return {

		view :"form", 
		id:"myform",
	/* form fields */
	rows:[
    { view:"text", label:"Name:",
      name:"firstname", value:""},
    { view:"text", label: "E-Mail:",
      name:"email", value:""}
],
		};

}
init() {
}
};

Can some help me to understand where am i wrong ?
thanks in advance

2

in “classic” function you should use $scope to access JetView

onClick:{
    "fa-pencil": function(e,id) {
        this.$scope.app.show("/details");
    }
}

in arrow function this is possible

onClick:{
    "fa-pencil": (e,id)=> {
        this.app.show("/details");
    }
}
3

Hi integral many thanks , now ii is Ok
just a question: where can i find an example that clicking in the button (i.e. my “pencil”) and than open the detail form for display/update the row ?
in the app at “https://webix.com/demos/material/admin-app/#!/app/products” there is the “pencil” but it dos’not work
thanks in advance

4

take a look at webix-jet github repository.
you can find there good samples.

5

Hi integral … be patient …
as i did not find the example that i was looking for, i tried to build from the begin…
i copied from https://github.com/webix-hub/gitbook-webix-jet/blob/master/part-ii-webix-jet-in-details/views-and-subviews.md the window’s example, so i created two files:

// views/wind.js
import {JetView} from “webix-jet”;
import Embeddable from “views/embeddable”;

export default class Window extends JetView{
config(){
return {
view:“window”, position:“center”, head:“Window”,
body: Embeddable
}
}
showWindow(){
this.getRoot().show();
}
}

and

// views/embeddable.js
import {JetView} from “webix-jet”;

export default class Embeddable extends JetView{
config(){
return {
template:“I’m cozily inside a window”
};
}
}

and in my data01 i written:
…
{view: “icon”, template:"", width: 40}] ,
onClick:{
“fa-pencil”:function(e,id){
this.$scope.app.show("/top/wind");
…

but when i click on pencil i don’t see any windows… olny a blank line at the top with the menù at the left
can uou help me again to understand where am i wrong ?
thanks in advance anyway

6

view config should not return window based config if you want to use it as subview.
instead you can use smth like that

// views/wind.js
import {JetView} from "webix-jet";
import Embeddable from "views/embeddable";

export default class Window extends JetView{
    config() {
       return {};//spacer
    }
    init() {
        this.$window = this.ui({
          view:"window", position:"center", head:"Window",
          body: Embeddable
       });
    }
    showWindow() {
        this.$window.show();
    }
    hideWindow() {
        this.$window.hide();
    }
    ready() {//called on view ready
        this.$window.show();
    }
}
7

Hi i’m new in webix …
suppose that my embeddable.js src is:

export default class Embeddable extends JetView{
    config(){
        return {
		 rows:[	
	   { view:"text", label:"Row:", name:"row", value:""},
	   { view:"text", label:"Name:", name:"firstname",  value:""},
       { view:"text", label: "E-Mail:", name:"email", value:""}
    ]
          /*  template:"I'm cozily inside a window" */
        };
    }
}

how can i set Row fields , from a variable ?

i have tried in wind.js this:

 init() {
        this.$window = this.ui({
          view:"window", position:"center", head:"Window",
          body: Embeddable
       });
	   var row = this.getParam("id"); 
	   this.$window.setValues(row);       <=====
    }

but i receive error “this.$window.setValues is not a function”

thanks in advance

8

Please check the snippet
https://snippet.webix.com/xcan97w2

The dirty solution will be to add an id for the element in the embedable view, so later it will be possible to use plain $$(id).setValue API

The more strict solution can be created by adding methods to the view, as in the provided snippet.