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.

            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'));
            

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.

            var controlInstance = someElement.control;
            

Below is textbox control's implementation code

            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'));
            }