데이터그리드 스크롤 버그

기본적인 개념으로.. 데이터 그리드등에 ItemRenderer를 사용하여 checkBox 나 기타 등등의 컴포넌트를 넣었을때

데이터그리드를 스크롤하게 되면 체크박스의 데이터가 뒤죽박죽이 되는 문제가 발생한다.

이는.. 보이는영역에서 사라진 컴포넌트들이 재사용(!!) 되면서 일어나는 현상으로 다음과 같은 방법으로 해결한다.

<Adobe Flex4 Help에서 발췌>

Creating a recyclable item renderer

With virtual layout disabled, the DataGroup and SkinnableDataContainer containers create one instance of the item renderer for each child. With virtual layout enabled, the container only creates enough item renderers to display its currently visible children. Virtual layout greatly reduces the overhead required to use the DataGroup and SkinnableDataContainer containers.
With virtual layout enabled, when a child is moved off the visible area of the container, its item renderer is recycled. First, the item renderer’s data property is set to null. When the item renderer is reused, its data property is set to the data item representing the new child. Therefore, if a recycled item renderer performs any actions based on the value of the data property, it must first check that the property is not null. When the item renderer is reassigned, Flex also calls the updateRenderer() method of the item renderer owner. This method must set the owner and label properties on the item renderer. Subclasses of SkinnableDataContainer, can use the updateRenderer() method to set additional properties on the item renderer. Because a container can reuse an item renderer, ensure that you fully define its state. For example, you use a CheckBox control in an item renderer to display a true (checked) or
false (unchecked) value based on the current value of the data property. A common mistake is to assume that the CheckBox control is always in its default state of unchecked and only inspect the data property for a value of true.
However, remember that the CheckBox can be recycled and had previously been checked. Therefore, inspect the data property for a value of false , and explicitly uncheck the control if it is checked, as the following example shows:

<ItemRenderer의 dataChange 이벤트를 이용하는 방법>
Prerelease - 5 October 2009
USING FLEX 4 442
Building the user interface
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\myComponents\MySimpleItemRendererCB.mxml -->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/halo"xmlns:s="library://ns.adobe.com/flex/spark" dataChange="setMgr();">
<fx:Script>
<![CDATA[
private function setMgr():void {
// Check to see if the data property is null.
if (data == null) return;
// If the data property is not null,
// set the CheckBox control appropriately..
if (data.manager == "yes") {
mgr.selected = true;
}
else {
mgr.selected = false;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:HGroup verticalCenter="0" left="2" right="2" top="2" bottom="2">
<s:Label text="{data.lastName}, {data.firstName}"/>
<s:Label text="{data.companyID}"/>
<s:CheckBox id="mgr"/>
</s:HGroup>
</s:ItemRenderer>

Use the dataChange event of the ItemRenderer class to detect the change to its data property. This event is dispatched whenever the data property changes. Alternatively, you can override the data property. Alternatively, you can override the ItemRenderer.data
property itself, as the following example shows:

<data 속성을 오버라이드하는 방법>
Prerelease - 5 October 2009
USING FLEX 4 443
Building the user interface
<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\myComponents\MySimpleItemRendererCBData.mxml -->
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
// Check to see if the data property is null.
if (value== null) return;
// If the data property is not null,
// set the CheckBox control appropriately..
if (value.manager == "yes") {
mgr.selected = true;
}
else {
mgr.selected = false;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:HGroup verticalCenter="0" left="2" right="2" top="2" bottom="2">
<s:Label text="{data.lastName}, {data.firstName}"/>
<s:Label text="{data.companyID}"/>
<s:CheckBox id="mgr"/>
</s:HGroup>
</s:ItemRenderer>

상단의 두가지 방법을 이용하여 새로운 ItemRenderer를 생성한 후 다음과 같은 방법으로 사용한다.

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkDataGroupContainerTypicalItem.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
[Bindable]
public var typicalObj:Object = {
firstName:"Long first name",
lastName:"Even longer last name",
companyID:"123456",
manager:"yes"
};
]]>
</fx:Script>
<s:Scroller>
<s:DataGroup itemRenderer="myComponents.MySimpleItemRendererCB"
height="100"
typicalItem="{typicalObj}" >
<s:layout>
<s:VerticalLayout useVirtualLayout="true"/>
</s:layout>
<mx:ArrayList>
<fx:Object firstName="Bill" lastName="Smith" companyID="11233" manager="yes"/>
<fx:Object firstName="Dave" lastName="Jones" companyID="13455" manager="no"/>
<fx:Object firstName="Mary" lastName="Davis" companyID="11543" manager="yes"/>
<fx:Object firstName="Debbie" lastName="Cooper" companyID="14266" manager="no"/>
<fx:Object firstName="Bob" lastName="Martins" companyID="11233" manager="yes"/>
<fx:Object firstName="Jack" lastName="Jones" companyID="13455" manager="no"/>
<fx:Object firstName="Sam" lastName="Johnson" companyID="11543" manager="yes"/>
<fx:Object firstName="Tom" lastName="Fitz" companyID="14266" manager="no"/>
<fx:Object firstName="Dave" lastName="Mead" companyID="11233" manager="yes"/>
<fx:Object firstName="Dave" lastName="Jones" companyID="13455" manager="no"/>
<fx:Object firstName="Mary" lastName="Davis" companyID="11543" manager="yes"/>
<fx:Object firstName="Debbie" lastName="Cooper" companyID="14266" manager="no"/>
</mx:ArrayList>
</s:DataGroup>
</s:Scroller>
</s:Application>

[출처] ItemRender 안의 데이터 유지|작성자 찬밥덩이