Simple use of the Flex Renderer

Renderer is a very common concept in FLEX. It is used in many places, such as a drop-down tree and a datagrid containing checkbox.

The following example demonstrates how the Renderer transmits values with its parent component.

 

<? Xml version = "1.0" encoding = "UTF-8"?> <Br/> <mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolute"> <br/> <mx: dataGrid x = "66.5" y = "145" id = "dataGrid" dataProvider = "{dataXml. children ()} "> <br/> <mx: columns> <br/> <mx: dataGridColumn headerText = "tag" dataField = "@ label"/> <br/> <mx: dataGridColumn headerText = "value" dataField = "@ value"> <br/> <mx: itemRenderer> <br/> <mx: Component> <br/> <mx: VBox> <br/> <mx: Script> <br/> <! -- [CDATA [<br/> [Bindable] <br/> public var comboSource: Array = ["true", "false"]; <br/>/** initialize the drop-down box Renderer **/<br/> private function init (): void <br/>{< br/> trace (data. @ value); <br/> if (data. @ value = "true") <br/>{< br/> comboItem. selectedIndex = 0; <br/>}< br/> else <br/>{< br/> comboItem. selectedIndex = 1; <br/>}</p> <p> private function onComboClosed (): void <br/>{< br/> data. @ value = comboItem. text; <br/>}< br/>] ]> <Br/> </mx: Script> <br/> <mx: ComboBox dataProvider = "{comboSource}" creationComplete = "init (); "id =" comboItem "close =" onComboClosed (); "/> <br/> <! -- <Mx: ComboBox dataProvider = "{comboSource}" id = "comboItem" text = "{data. @ value} "/> --> <br/> </mx: VBox> <br/> </mx: Component> <br/> </mx: itemRenderer> <br/> </mx: DataGridColumn> <br/> </mx: columns> <br/> </mx: DataGrid> <br/> <mx: script> <br/> <! [CDATA [<br/> import mx. controls. alert; <br/> [Bindable] <br/> protected var dataXml: XML = <info> <br/> <aa label = "24" value = "false"/> <br/> <aa label = "55" value = "false "/> <br/> <aa label = "23" value = "true"/> <br/> <bb label = "bb" value = "false"/> <br/> </info>; </p> <p> private function onButtonClicked (): void <br/>{< br/> Alert. show (dataXml. toXMLString (), "datasource"); <br/>}</p> <p>] --> <br/> </mx: script> <br/> <mx: Button x = "66" y = "115" label = "Button" click = "onButtonClicked (); "/> </p> </mx: Application>

 

As shown in the preceding example, the Renderer and its parent component pass the value through the data object.

Reference: google (flex itemRender keyword)