Flex progressbar in datagrid

Embed progressbar in datagrid 
See the code below.

The key point is <mx:itemRednderer> ... .This seqment can embed component into datagrid.

fetch data to set progressbar 
The key point is this.data["progress"]. The this.data["progress"] is the value getted from dataprovider.

trigger to update progressbar 
This key point is updateComplete handler which is called when dataprovider is refreshed. So we

can update progressbar in updateComplete callback function.

 <mx:AdvancedDataGridColumn id="progressshow" width="300" datafield="progress"
            headerText="进度">
   <mx:itemRenderer>
    <fx:Component>
     <mx:HBox creationComplete="hBox1_creationCompleteHandler(event)"
        updateComplete="hBox1_updateCompleteHandler(event)">
      <fx:Script>
       <![CDATA[
        import mx.events.FlexEvent;
        
        protected function hBox1_updateCompleteHandler(event:FlexEvent):void
        {
         if(this.data != null)
         {
          trace(this.data["progress"]);
          pd.setProgress(this.data["progress"],100);
          pd.label = "已完成" + pd.percentComplete + "%";
         }
         
        }
        
        protected function hBox1_creationCompleteHandler(event:FlexEvent):void
        {
         pd.setProgress(0,100);
         pd.label = "已完成" + pd.percentComplete + "%";
         
        }
        
       ]]>
      </fx:Script>
      <mx:ProgressBar id="pd" width="280" maximum="100" minimum="0" mode="manual">
      </mx:ProgressBar> 
     </mx:HBox>
    </fx:Component>
   </mx:itemRenderer>
   </mx:AdvancedDataGridColumn>