Step-by-step example

As an example we'll create element with the name 'password'.

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

defaults

So, password. What parameters do we need to define?

We'll specify the following:
1. width (the parameter - inputWidth).
2. maximum length (in characters) of an input field (the parameter - maxLength).
3. and label (the parameter -label).

The function will look like this:

defaults:{
	template:function(config){ return (config.label + "&nbsp" || "label") + "<input type='password' maxlength=" + (config.maxLength || 30) + " style='width:" + (config.inputWidth || 100) + "px'>" + (config.value || "") + "</input>" }
}
  • in simple words, input parameter 'config' unites all the parameters specified in the element instance.

    Look at the codeline
    {view:"password",label:"Password", inputWidth:70, maxLength:5}

    Here, config unites the following parameters: 'label', 'inputWidth', 'maxLength'.
    defaults gets the mentioned above parameters and processes them.

setValue

For our element we'll make the following definition:

setValue:function(value){
		this.getInput().value = value;
}
  • value - a value that is gotten by the field. In our case, the parameter has the same name - 'value'.

We could skip this step and use default processing defined for 'text' control. The same result would be got.

getValue

We will return the same stuff we've set only just.

getValue:function(){
		return this.getInput().value;
}

We could skip this step and use default processing defined for 'text' control. The same result would be got.

Now, combine functions' definitions and try the element in-use (full code of the element and its usage example).