Sys.UI.Control
Conceptually, a control differs from a behavior in the sense that instead of just providing client functionality, a control usually represents or wraps the element, to provide additional properties and methods that extend its programming interface.
<pre data-sub="prettyprint:_">
Type.registerNamespace('Samples');
Samples.EmptyControl = function(element) {
Samples.EmptyControl.initializeBase(this, [element]);
}
Samples.EmptyControl.prototype = {
initialize : function() {
Samples.EmptyControl.callBaseMethod(this, 'initialize');
},
dispose : function() {
Samples.EmptyControl.callBaseMethod(this, 'dispose');
}
}
Samples.EmptyControl.registerClass('Samples.EmptyControl',
Sys.UI.Control);
//creating controls
$create(Samples.EmptyControl, {}, {}, {}, $get('elementID'));
</pre>
<p>Because controls are client components, you can access them with the $find method. However, the Id of control can't be set programatically. It is automatically set by the SysUI.Control calss to the same ID as the associated element. You can get a reference to the control by passing the ID of the associated DOM element to $find. Another way to access a control is through the associated element. Because an element can have one or only one associated control, a property called "control", which stores the reference to the control - is created on the DOM element when the control is initialized. Supposing that you have a DOM element stored in the someElement variable, the following statement accesses the associated control arne stores a reference in the controlInstance variable.</p>
<pre data-sub="prettyprint:_">
var controlInstance = someElement.control;
</pre>
<p>Below is textbox control's implementation code</p>
<pre data-sub="prettyprint:_">
Type.registerNamespace('Samples');
// Samples.TextBox class.
Samples.TextBox = function(element) {
Samples.TextBox.initializeBase(this, [element]);
this._ignoreEnterKey = false;
}
Samples.TextBox.prototype = {
// Component lifecycle.
initialize : function() {
Samples.TextBox.callBaseMethod(this, 'initialize');
// Subscribe to the keypress event.
$addHandlers(this.get_element(),
{keypress:this._onKeyPress}, this);
},
dispose : function() {
// Detach event handlers.
$clearHandlers(this.get_element());
Samples.TextBox.callBaseMethod(this, 'dispose');
},
// Handle the keypress event.
_onKeyPress : function(evt) {
if(this._ignoreEnterKey && evt.charCode == 13) {
evt.preventDefault();
}
},
// Properties.
get_ignoreEnterKey : function() {
return this._ignoreEnterKey;
},
set_ignoreEnterKey : function(value) {
this._ignoreEnterKey = value;
}
}
Samples.TextBox.registerClass('Samples.TextBox', Sys.UI.Control);
//at the client side
Sys.Application.add_init(pageInit);
function pageInit() {
$create(Samples.TextBox, {'ignoreEnterKey':true}, {}, {},
$get('myTextBox'));
}
</pre>