Flex: Error on Scrolling Vertically in a DataGrid

i have this code

<mx:DataGrid id="tempListDG" itemDoubleClick="doubleClickHandler(event)" width="100%" height="100%" rowHeight="110" 
            draggableColumns="false" sortableColumns="false" allowMultipleSelection="false">
            <mx:columns>
                <mx:DataGridColumn  id="chkSel" headerText=" " width="15" sortable="false">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingLeft="3">
                                <mx:Script>
                                    <![CDATA[

                                    ]]>
                                </mx:Script>
                                <mx:CheckBox name="chkSel" selected="false" />
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn id="sum" dataField="@summary" headerText="Summary Description" width="280" >
                    <mx:itemRenderer>
                        &开发者_如何学编程lt;mx:Component>
                            <mx:HBox name="thumbs" creationComplete="setThumbnailImage(event)" verticalAlign="top" verticalScrollPolicy="off">
                                <mx:Script>
                                    <![CDATA[
                                        import mx.controls.Text;
                                        import com.azaaza.containers.HBox;
                                        import com.azaaza.controls.Image;
                                        import com.hwakin.tavi.model.ModelLocator;
                                        import mx.controls.DataGrid;

                                        private function setThumbnailImage(e:Event):void{
                                            var dg:DataGrid = DataGrid(e.target.parent.parent);
                                            var dCounter:int = TemplateOpenPanel(dg.parent.parent).dCount;
                                            if (dCounter+1 > XMLList(dg.dataProvider).length()){
                                                dg.validateDisplayList();
                                                return;
                                            }
                                            img.load(ModelLocator.getInstance().StringToBitmap(XMLList(dg.dataProvider)[dCounter].@thumbStr));
                                            img.width = 80;
                                            img.height = 110;
                                            txt.htmlText = XMLList(dg.dataProvider)[dCounter].@summary;
                                            txt.maxHeight = 110;
                                            dCounter++;         
                                            TemplateOpenPanel(dg.parent.parent).dCount = dCounter; 
                                        }
                                    ]]>
                                </mx:Script>
                                <mx:Image id="img">                                 
                                </mx:Image>
                                <mx:Text id="txt">                                  
                                </mx:Text>
                            </mx:HBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>                
                <mx:DataGridColumn dataField="@dateCreated" headerText="Date Created" width="100" />
                <mx:DataGridColumn dataField="@dateModified" headerText="Date Modified" width="100"/>
                <mx:DataGridColumn dataField="@guid" headerText="guid" visible="false"/>
                <mx:DataGridColumn dataField="@fileName" headerText="File Name" visible="false"/>
                <mx:DataGridColumn dataField="@tempXml" headerText="tempXml" visible="false"/>
            </mx:columns>
        </mx:DataGrid>

the datagridcolumn id named "sum" creates images and text given by the XML i loaded but i got error when i use the scroll of the datagrid. and the images get disaligned and all of the data like the dateCreated and dateModified are shuffled or something.

please help me with this one.. thanks

If you are still looking for answer add this into your code.

1)

protected function dgtempListDG_scrollHandler(event:ScrollEvent):void
{
    // TODO Auto-generated method stub

    tempListDG.invalidateDisplayList();
}

2)

scroll = "dgtempListDG_scrollHandler(event)"

Add this in mx:datagrid.

remember that item renderers are recycled and reused, so you should not use creationCompelte events, (if only 5 item renderers are visible, only 7 are created and then they are reused, but they are created only once so creation complete only fires once)

I like to use dataChange events, they work upon creation and each time the data of the itemRenderer changes.