Creating a new control

Problem

How to create your own control?

Solution

Common structure of control:

dhx.protoUI({
	name:"controlName",
	defaults:{ template:"..." }
        setValue:function(value){...},
        getValue:function()(...}
}, dhx.ui.button);

In the code above, a new control will inherit from button. If your new element is more similar to other control, just replace button with its name, e.g. 'dhx.ui.text'.
You may not define setValue() and getValue() functions. In this case, the default processing, specified for control you inherit from, will be applied.

  • defaults - defines element's parameters and their processing.
    Later, while creating element instance, you can specify any parameter but it will be no use. Just the parameters remained here will be processed.
  • setValue - sets element value.
  • getValue - specifies the return value of the element. So, it lets you get value of the element for further usage.

 
Your possibilities aren't limited by the mentioned functions. You can define any parameter and then specify a handler function for it.

See step-by-step example here