在Flex DataGrid 顯示檔案上傳進度

以下例子說明如何使用 flex datagrid 元件及 progressbar 顯示檔案上傳進度

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
verticalGap="0" layout="vertical" creationPolicy="all"
verticalAlign="middle" horizontalAlign="center" width="100%" 
height="100%">
<mx:Script><![CDATA[
import mx.collections.*;
import mx.controls.*;
import mx.events.*;
import mx.managers.*;
import mx.rpc.events.*;
import mx.rpc.remoting.*;
import mx.utils.*;
import flash.net.*;

private function openFileBrowse() : void {

function fileSelect(event:Event):void {
gridFileList.dataProvider=event.target['fileList'];
}


var fileList : FileReferenceList = new FileReferenceList();
fileList.addEventListener(Event.SELECT,fileSelect);
try {

fileList.browse( new Array(
new FileFilter("txt","*.txt")
) );
}
catch (e : Error) {

}
}


private function uploadFile() : void {

var request : URLRequest =
new URLRequest("http://yuoruploadpage");

request.contentType = "text/html; charset=big5";

if( gridFileList.dataProvider == null )
return;

for( var i : int = 0; i < gridFileList.dataProvider.length; i++ ) {

var fileRef: FileReference = gridFileList.dataProvider[i];
fileRef.upload(request, gridFileList.dataProvider[i]["name"]);
}
}


]]></mx:Script>

<mx:Panel width="750" height="100%" title="檔案上傳作業" paddingTop="3">

<mx:HBox width="100%" horizontalGap="0" height="50"
verticalAlign="middle" borderStyle="solid" paddingLeft="5">

<mx:Button label="選取上傳檔案" id="btnBrowse" click="openFileBrowse();"/>
<mx:Spacer width="5"/>
<mx:Button label="上傳檔案" id="btnUpload" click="uploadFile();"/>
<mx:Spacer width="5"/>

</mx:HBox>

<mx:DataGrid id="gridFileList" height="100%" width="100%">
<mx:columns>
<mx:DataGridColumn headerText="檔案名稱"
dataField="name" width="100"/>
<mx:DataGridColumn headerText="上傳進度" width="100">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" >
<mx:Script><![CDATA[
import flash.events.ProgressEvent;

  override public function set data(value:Object):void {
   super.data = value;
   pb.maximum=0;
   pb.minimum=0;
   this.data.addEventListener(ProgressEvent.PROGRESS, progressHandler);
                                         
                                      }  
  private function progressHandler(event:ProgressEvent):void {
  pb.setProgress(event.bytesLoaded,event.bytesTotal);
  }
  
]]></mx:Script>
<mx:ProgressBar width="100%" mode="manual" id="pb" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

</mx:columns>
</mx:DataGrid>

</mx:Panel>

</mx:Application>