Intermediate

Top 10 Helpers You Should Know About

webix.ui

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

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

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

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

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

More opportunities of using this method are described in the chapter Rebuilding Application Layout.

webix.ready

This method is a cross-browser alternative to the onDocumentReady event and can be used instead of onload() method. Code, which was put inside of it, 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 full (independent) copy of object

var new_obj = webix.copy(source_obj)// full copy

API reference

webix.extend

Adds method and properties of 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 one more method to get an object copy. In such case, you must specify an empty object as second parameter.

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

API reference

webix.exec

Next helper allows to execute code string at runtime.

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

It is have advantage over eval - variables defined in code will be defined in global scope, the same as in case of normal js code.

API reference

webix.delay

Delay routine. If you need to delay some code from executing at runtime you are at the right place. 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 an 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 handler and webix.eventRemove - to remove it.

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 methods implementing CSS manipulations. webix.html.addCss lets to add CSS class to element, webix.html.removeCss - removes some defined CSS class.

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

API reference

All Webix helpers are listed in the related of API Reference section.

Back to top