flex datagrid中显示进度条demo

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="application1_creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.FlexEvent;

			[Bindable]
			private var employees:ArrayCollection=new ArrayCollection([{name:"test1",count:1,total:10},{name:"test2",count:1,total:10},{name:"test3",count:1,total:10}]);
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
			}


			


			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				if(dg.selectedItem!=null){
					var d:Object=dg.selectedItem;
					d.count=int(d.count)+1;
					employees.setItemAt(d,employees.getItemIndex(d));
				}else{
					Alert.show("请先选择数据!");
				}
			}

		]]>
	</fx:Script>
	
	<mx:Panel title="DataGrid Control Example" height="100%" width="100%" 
			  paddingTop="10" paddingLeft="10" paddingRight="10">
		<s:Button label="点击" click="button1_clickHandler(event)"/>
	
		<mx:Label width="100%" color="blue"
				  text="Select a row in the DataGrid control."/>
		
		<mx:DataGrid id="dg" width="100%" height="100%"  dataProvider="{employees}">
			<mx:columns>
				<mx:DataGridColumn dataField="name" headerText="Name"/>
				<mx:DataGridColumn  headerText="进度条">
					<mx:itemRenderer>
						<fx:Component>
							<mx:Canvas updateComplete="updateCompleteHandler(event,data)" creationComplete="canvas1_creationCompleteHandler(event,data)" >
								<fx:Script>
									<![CDATA[
										import mx.controls.Alert;
										import mx.events.FlexEvent;

										protected function updateCompleteHandler(event:FlexEvent,d:Object):void
										{
											// TODO Auto-generated method stuba
											
											pb.setProgress(Number(d.count),Number(d.total));
										}


										protected function canvas1_creationCompleteHandler(event:FlexEvent,d:Object):void
										{
											pb.minimum=0;
											pb.maximum=Number(d.total);
											// TODO Auto-generated method stub
										}

									]]>
								</fx:Script>
							<mx:ProgressBar    direction="right" mode="manual" width="100%" id="pb">
								
							</mx:ProgressBar>
							</mx:Canvas>
						</fx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	
		
	</mx:Panel>
</mx:Application>