Top 10 Helpers You Should Know About

webix.ui

This method is used mainly to instantiate Webix component of any complexity level, whether it is a control or a complete application layout.

It converts a JSON structure passed into it as a parameter to client-side layout objects - this is what Webix is used for :)

webix.ui({ view:"", ... });

Normally, you need one webix.ui() constructor per application while any window or popup needs an extra one as windows exist above the page layout.

webix.ui({ view:"window", ... }).show();

Read more on Rebuilding Application Layout.

webix.ready

This method is a cross-browser alternative to the onDocumentReady event and can be used instead of the onload() method. Code inside the helper handler will be called just after the complete page has parsed, protecting you from potential errors.

The thing is optional but we recommend to use it.

It can be used multiple times.

 webix.ready(function(){ 
     webix.ui({
         container:"box",
         view:"window",
         // ...
     });
 })

API reference

webix.bind

An easy way to bind a function to an object (inside bound function, this will point to an object instance).

var t = webix.bind(function(){
    alert(this);
}, "master");
 
t(); // will alert "master"

webix.copy

This method allows you to make a deep (independent) copy of an object:

var new_obj = webix.copy(source_obj); // deep copy

API reference

webix.extend

Adds methods and properties of the source object to the target object:

var target_obj = new webix.ui.toolbar(config);
webix.extend(target_obj, webix.Movable);

Also, it can be used as another method to get an object copy. In such a case, you must specify an empty object as the first parameter.

var new_obj = webix.extend({}, source_obj); // object based copy

API reference

webix.exec

This helper allows executing code string at runtime.

webix.exec("var t = 2;");

It has an advantage over eval: variables defined in code will be defined in the global scope, the same as in case of a regular js code.

API reference

webix.delay

webix.delay waits for the specified number of milliseconds and then executes the specified code.

webix.delay(webix.animate, webix, [node, animation], 10);

API reference

webix.uid

A tool for getting a unique ID (ID is unique per session, not globally unique).

var name = webix.uid();

API reference

webix.event

webix.event is used to attach event handlers, and its opposite - webix.eventRemove - to remove them.

var display_handler = webix.event(document.body,'click',function(e){});
// ...
webix.removeEvent(display_handler);

API reference

webix.html.offset

With the help of this method you can get the position of any HTML element.

var offset = webix.html.offset(ev.target);

API reference

webix.html.addCss

Two opposite methods implementing CSS manipulations. webix.html.addCss allows adding a CSS class to an element; webix.html.removeCss - removes a specified CSS class.

webix.html.addCss(this._headbutton, "collapsed");
// ...
webix.html.removeCss(this._headbutton, "collapsed");

API reference

Back to top