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);
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 + " " || "label") + "<input type='password' maxlength=" + (config.maxLength || 30) + " style='width:" + (config.inputWidth || 100) + "px'>" + (config.value || "") + "</input>" } }
{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.
For our element we'll make the following definition:
setValue:function(value){ this.getInput().value = value; }
We could skip this step and use default processing defined for 'text' control. The same result would be got.
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).