Flex: labelFunction versus ItemRenderer

When to Use labelFunction versus ItemRenderer:
http://www.kylehayes.info/2007/10/09/When-to-Use-labelFunction-versus-ItemRenderer/


理解 Flex itemRenderer 系列：
英文：
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
中文：
第 1 部分:内联渲染器 http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt1.html
第 2 部分: 外部渲染器 http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt2.html

引用

listData as DataGridListData－它将 listData 转换为 DataGridListData 对象, 使您能访问它的 dataField
.dataField－该字段用于渲染的列。它使这个 itemRenderer 变得一般。可以将这个 itemRenderer 用于多个列。在本例中, dataField 是“price”。
data[ ... ]－它访问项目中特定字段的数据。在本例中, 它是价格列。

记住, itemRenderer 是循环使用的, 所以如果测试失败, 还必须将颜色设置回白色。否则, 当用户滚动列表时, 所有 itemRenderer 最终将变为紫色。
注意: 请记住 itemRenderer 是循环使用的, 所以您必须始终恢复值；不要在 itemRenderer 中保留 if 而没有 else。

在我已知概念里的一丁点儿总结：一

引用

对于DataGridColumn，可对列数据做处理的属性有
labelFunction（参数为Function）
itemRenderer（参数为IFactory）  两个；

而对于ComboBox，可对数据列表做处理的属性有
labelFunction（参数为Function）
labelToItemFunction（参数为Function）
itemRenderer（参数为IFactory）
itemRendererFunction（参数为Function） 四个

这里让我纠结的是，ComboBox的itemRenderer和itemRendererFunction到底啥区别那？待着日抽空google下。



Setting the itemRenderer or itemEditor property in ActionScript：
http://livedocs.adobe.com/flex/3/html/help.html?content=cellrenderer_4.html

引用

// Cast listData to DataGridListData. 
                var myListData:DataGridListData = 
                    DataGridListData(listData);
                
                // Access information about the data passed 
                // to the cell renderer.
                text="row index: " + String(myListData.rowIndex) + 
                    " column index: " + String(myListData.columnIndex);

自定义itemRenderer：
Adobe Flex 4.5 -> Creating MX inline item renderers and editors：
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7ca4.html

引用

The <fx:Component> tag defines a new scope in an MXML file, where the local scope of the item renderer or item editor is defined by the MXML code block delimited by the <fx:Component> and </fx:Component> tags. To access elements outside of the local scope of the item renderer or item editor, you prefix the element name with the outerDocument keyword.

For example, you define one variable named localVar in the scope of the main application, and another variable with the same name in the scope of the item renderer. From within the item renderer, you access the application’s localVar by prefixing it with outerDocument keyword

要注意：使用<fx:Component>会改变变量的scope。所以，在<fx:Component>中，是可以定义和外部名字相同的变量的；如<fx:Component>外部已定义了名为domintDataProvider的变量：

<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
		
		<!-- 航班性质 -->
		<s:ArrayList id="domintDataProvider">
			<fx:Object label="国内" data="D"/>
			<fx:Object label="国际" data="I"/>
		</s:ArrayList>

在component内部你仍然可以定义一个同名的变量domintDataProvider。并且这两个同名的变量是完全不同的，因为它们在不同的作用域scope中：

<fx:Component>
						<mx:VBox horizontalCenter="0">
							<fx:Script>
								<![CDATA[           
									import mx.collections.ArrayList;
									
									import spark.components.Label; //这里还必须得import一次？ so strange!
									// Variable in the renderer scope.
									//internal var domintLabel:String = "";
									private var domintDataProvider:ArrayList = outerDocument.domintDataProvider;

对mx.collections.ArrayList的import声明，在<fx:Component>中必须也得再次做一次(即使你在<fx:Component>的外部已经import了一次；但这里的<fx:Component>已经彻底改变了变量等的作用域scope，外部的import在<fx:Component>内已不可用)
总之一句话：<fx:Component>会创造一个全新的scope！
那在<fx:Component>内部怎么使用其外部的变量等那？答案是通过outerDocument关键字来使用，正如上面引用中提到的那样。另外，如果<fx:Component>想访问的变量不在<fx:Component>的定义文件中，而在其定义文件的父文件中，这时想访问这个的话，可以使用 parentDocument 关键字：
http://flextips.corank.com/tech/story/using-parentdocument-or-outerdocument-

引用

This one saved me a LOT of time the other day. When using inline itemRenderers, the <mx:Component> tag that you have to write before the itemRenderer tags marks a change of scope. To call methods on the parent mxml document from an inline renderer , use the parentDocument property.

重写set data()方法时：
记得要加 super.data = value;

override public function set data(value: Object):void {
										super.data = value; //这句代码必须写上！
										//自己加的处理代码
									}

http://vikinghammer.com/2009/02/25/flex-make-sure-to-call-super-in-item-renderer-override-methods/




通过itemrender让datagrid中选定的行的字体变粗：
Flex DataGrid Selected Row Styling：
http://www.switchonthecode.com/tutorials/flex-datagrid-selected-row-styling

通过工厂去创建datagrid列的itemrender；适用为动态增加的datagridcolumn添加itemrender：
DIFFERENT ROWS IN DATAGRID – PROGRAMMATICALLY ADDED ITEMRENDERERS (CLASSFACTORY AND IFACTORY)：
http://www.flexer.info/2009/01/09/different-rows-in-datagrid-programmatically-added-itemrenderers-classfactory-and-ifactory/

Flex datagrid/advancedatagrid按条件显示行的背景颜色：
http://blog.csdn.net/cfhacker007/archive/2010/08/03/5784523.aspx





在datagrid中使用itemRenderer后，可能出现的问题：
1 datagrid中itemDoubleClick 失效的问题：
Flex : DataGrid ItemRenderer当某列使用了itemRenderer后，在该列的空白处双击，不会触发itemDoubleClick处理。下面的解决方式，试过，不好使：
Flex : DataGrid ItemRenderer and DoubleClick ：
http://www.kerkness.ca/flex-datagrid-itemrenderer-and-doubleclick-oh-my/
2 datagrid中contextMenu 失效问题：
datagrid添加了自定制的contextMenu；当某列使用了itemRenderer后，在该列点击右键，contextMenu无效。下面的解决方式，试过，不好使：
Flex4 ContextMenu() not showing added Items：
http://stackoverflow.com/questions/5312115/flex4-contextmenu-not-showing-added-items





完整的itemRenderer例子：

<mx:DataGridColumn headerText="@Resource(bundle='messages_zh_CN', key='fidsDepf.grid.domint')" dataField="domint" >
				<mx:itemRenderer>
					<fx:Component>
						<mx:VBox horizontalAlign="center">
							<fx:Script>
								<![CDATA[           
									import mx.collections.ArrayCollection; //这里还必须得import一次？ so strange!
									// Variable in the renderer scope.
									[Bindable]
									private var domintLabel:String = "";
									private var domintDataProvider:ArrayCollection;
									override public function set data(value: Object):void {
										super.data = value; //这句代码必须写上！
										domintDataProvider = outerDocument.domintDataProvider;
										for(var i:int=0; i<domintDataProvider.length; i++) {
											if(domintDataProvider.getItemAt(i).data == value.domint) {
												domintLabel = domintDataProvider.getItemAt(i).label;
											} else {
												///
											}
										}
									}
								]]>
							</fx:Script>
							<s:Label text="{domintLabel}" />
						</mx:VBox>
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>