As we looked at in the introduction, this class is important because all of the Flexicious UI classes inherit from this class. You will mostly need to work with this class if you have highly interactive item renderers, that cannot be implemented using other simpler mechanisms like labelFunctions and interactive HTML (covered in later chapters). Let’s take a sample itemRenderer that inherits from UIComponent:

For those of you who are not aware, and itemRenderer is a classfactory that instantiates a component that encapsulates the DOM element that sits inside each data cell. (There are analogous header,footer,filter,pager and nextLevelRenderers as well)

               /**

               * Flexicious

               * Copyright 2011, Flexicious LLC

               */

               (function (window) {

                   "use strict";

                   var CheckBoxRenderer, uiUtil = flexiciousNmsp.UIUtils, flxConstants = flexiciousNmsp.Constants;

                   /**

                   * A CheckBoxRenderer is a custom item renderer, that defines how to use custom cells with logic that you can control

                   * @constructor

                   * @namespace flexiciousNmsp

                   * @extends UIComponent

                   */

                   CheckBoxRenderer = function () {

                       //make sure to call constructor

                       flexiciousNmsp.UIComponent.apply(this, ["input"]); //second parameter is the tag name for the dom element.

                       this.domElement.type = "checkbox"; //so our input element becomes a checkbox;

                       /**

                       * This is a getter/setter for the data property. When the cell is created, it belongs to a row

                       * The data property points to the item in the grids dataprovider that is being rendered by this cell.

                       * @type {*}

                       */

                       this.data = null;

                       //the add evt listener will basically proxy all DomEvents to your code to handle.

                       this.addEventListener(this, flxConstants.EVENT_CHANGE, this.onChange);

                   };

                   myCompanyNameSpace.ItemRenderers_CheckBoxRenderer = CheckBoxRenderer; //add to name space

                   CheckBoxRenderer.prototype = new flexiciousNmsp.UIComponent(); //setup hierarchy

                   CheckBoxRenderer.prototype.typeName = CheckBoxRenderer.typeName = 'CheckBoxRenderer'; //for quick inspection

                   CheckBoxRenderer.prototype.getClassNames = function () {

                       return ["CheckBoxRenderer", "UIComponent" , "EventDispatcher","TypedObject"]; //this is a mechanism to replicate the "is" and "as" keywords of most other OO programming languages

                   };

                   /**

                   * This is important, because the grid looks for a "setData" method on the renderer.

                   * In here, we intercept the call to setData, and inject our logic to populate the text input.

                   * @param val

                   */

                   CheckBoxRenderer.prototype.setData = function (val) {

                       flexiciousNmsp.UIComponent.prototype.setData.apply(this, [val]);

                       var cell = this.parent; //this is an instance of FlexDataGridDataCell (For data rows)

                       var column = cell.getColumn(); //this is an instance of FlexDataGridColumn.

                       this.domElement.checked = this.data[column.getDataField()];

                   };

                   /**

                   * This event is dispatched when the user clicks on the icon. The event is actually a flexicious event, and has a trigger event

                   * property that points back to the original domEvent.

                   * @param evt

                   */

                   CheckBoxRenderer.prototype.onChange = function (evt) {

                       //in the renderer, you have the handle to the cell that the renderer belongs to, via the this.parent property that you inherit from flexiciousNmsp.UIComponent.

                       var cell = this.parent; //this is an instance of FlexDataGridDataCell (For data rows)

                       var column = cell.getColumn(); //this is an instance of FlexDataGridColumn.

                       this.data[column.getDataField()] = this.domElement.checked; //we use the dom element to wire back the value to the data object.

                   };

                   //This sets  the inner html, and grid will try to set it. Since we are an input field, IE 8 will complain. So we ignore it since we dont need it anyway.

                   CheckBoxRenderer.prototype.setText = function (val) {

                   };

               } (window));