Top 10 Helpers You Should Know About

In this article we're telling you about things that seems us most necessary and useful for you. So called, top 10 of the most essential DHTMLX Touch helpers.

dhx.ready(function(){ })

This method is alternative to onDocumentReady event and can be used instead of onload() method. Code, you put inside it, is called just after the page has been completely parsed protecting you from potential errors. The thing is optional but we recommend to use it.

Can be used multiple times.

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

dhx.bind(func, obj)

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

  • func - the function that will be bound
  • obj - the object which the function will be bound to
var t = dhx.bind(function(){
             alert(this);
        }, "master");
 
t(); //will alert "master"

dhx.copy(b)

The method makes a deep copy of an object

  • b - the object which copy you'd like to make
var a = dhx.copy(b)// prototype linked copy

dhx.extend(obj, b)

The thing is for extending object's functionality.

  • obj - the object which functionality you'd like to extend
  • b - extending functionality. It can be both object and some function
var obj = new dhx.ui.toolbar(config);
dhx.extend(obj, dhx.Movable);

Also, it's one more method to get an object copy. In such case, you must specify an empty object as the parameter obj.

var a = dhx.extend({},b) //object based copy

You can know more about usage of this helper here.

dhx.exec(code)

Our next helper allows you to execute code string at runtime.

  • code - the code you need to execute
dhx.exec(" var t = 2; ");

dhx.delay(code, obj, params, delay)

Delay routine. If you need to delay some code from executing at runtime you are at the right place. dhx.delay waits for the specified number of milliseconds and then executes the specified code.

  • code - the called method. In other words, it's the code you want to delay (mandatory)
  • obj - the object on behalf of which the defined method is called (optional)
  • params - the parameters that are passed to the method (optional)
  • delay - delay in milliseconds (optional. The default value is 1 millisecond)
dhx.delay(dhx.animate, dhx,[node,animation],10)

dhx.uid()

A tool for getting an unique id.

var name = dhx.uid();

dhx.event(node,event,code) and dhx.eventRemove(id)

Events. It's the thing we can't skirt around. dhx.event is used to attach event handler and dhx.eventRemove - to remove it.

  • node - the html element we want to attach an event to
  • event - the event name
  • code - the event handler
  • id - the name of the event which you want to remove
var display_handler = dhx.event(document.body,'click',function(e){})
\\
dhx.removeEvent(display_handler);

dhx.html.offset(node)

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

  • node - the html element which position you need to know
var obj = arguments[0]
var offset = dhx.html.offset(obj)

dhx.html.addCss(node, name) and dhx.html.removeCss(node, name)

Two methods implementing css manipulation. dhx.html.addCss lets to add css class to element, dhx.html.removeCss - removes some defined css class.

  • node - the html element which you want to add css class to
  • name - the name of the appropriate css class
dhx.html.addCss(this._headbutton, "collapsed");
//
dhx.html.removeCss(this._headbutton, "collapsed");