Mar 5, 2008


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.

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

            //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


            // 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.
            {keypress:this._onKeyPress}, this);

            dispose : function() {
            // Detach event handlers.

            Samples.TextBox.callBaseMethod(this, 'dispose');

            // Handle the keypress event.
            _onKeyPress : function(evt) {
            if(this._ignoreEnterKey && evt.charCode == 13) {

            // 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
            function pageInit() {
            $create(Samples.TextBox, {'ignoreEnterKey':true}, {}, {},

No comments:

Post a Comment