Flex's itemrenderer problem when sorting on datagrid

Please follow my explanation here :

1. I have a datagrid which holds a dataprovider that has 3 columns
2. one of those 3 columns is button itemrenderer, others are integer
3. I put 4 row into the datagrid
4. I set a button in a row to disable, others are enabled
5. Then I try sorting the datagrid by "click" on the column header that has integer column (not button column)
6. The exp开发者_如何学Cected result is that the disable button would go with its initial row. But the real result is when you click to sort 2-3 times, the buttons (in all rows) will have a wired behavior. The disabled button sometimes back to enable, and sometimes disabled but stay on a wrong row.

Is there anyone got a solution on this??

ItemRendrer are always reused if the grid has scrollbars and hence resulted into the wierd behavior.

A good article to read about ItemRenderer life cycle: http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html by Peter Ent

If your button item renderer is custom, you probably just need to override "set data". The itemrenderers are re-used and the data is changed when sorting. The item renderers themselves don't move.

Post the code of your item renderer and we can provide a better answer.

That sounds like you're not properly reinitializing your renderer. Every time you implement a custom itemRenderer, the best is to override the data accessors (literally data). Then if, for instance, you color an uicomponent in blue if the "blue" property is true, you should not consider that, otherwise, the uicomponent is not colored, because of the itemRenderers recycling stuff of every list-based component. Maybe this particular renderer was assigned to another data object just before, and then maybe the uicomponent already is blue. See ?

thank you for your help.

However, I didn't customize the button in anyway. It is just a usual button in flex but I did put it in a column by using itemrenderer. Here's the code for building a button control in a grid

         protected function redispatch(sourceEvent : Event ) : void {                   
                var newEvent : DynamicEvent = new DynamicEvent("aButtonWasClicked",true);                   
                newEvent["commentClickedEvent"] = sourceEvent;
                dispatchEvent(newEvent);
            }                       

            private function dispatchButtObj(sourceEvent:Event):void{
                var newEvent : DynamicEvent = new DynamicEvent("aButtonWasCreated",true);                   
                newEvent["commentCreatedEvent"] = sourceEvent;
                dispatchEvent(newEvent);
            }

    ]]></mx:Script>
<mx:Button label="Comment" height="20" width="48" textAlign="center" creationComplete="dispatchButtObj(event)" click="redispatch(event)"/>  

and here is how I use it

<mx:DataGridColumn headerText="Action" itemRenderer="com.myitem.controls.CommentButton" width="118" editable="false"/>