`

datagrid中滚动条问题

    博客分类:
  • flex
 
阅读更多

    经常有人在看了前面写的《Flex实现多文件上传之一:前台部分》之后,询问有关进度条的问题,就是文件在上传之后,不关闭窗口的情况下,重新选择文件后,有的进度条的进度依然显示成了100%。
    问题的原因本身和组件的itemRenderer使用有关,itemRenderer在组件中被创建后是循环使用的,并不是组件列表中有多少条数据就创建多少个itemRenderer。例如一个DataGrid组件中使用CheckBox用于选择,假设能看到的部分有10条记录,其它记录要通过拖动滚动条才能看到。那么DataGrid在创建itemRenderer时只会创建11到12个itemRenderer实例,多出的itemRenderer据说是用于定位的。然后这些itemRenderer循环使用。就是说你拖动DataGrid的滚动条在显示其它数据时,并不会创建新的itemRenderer来显示数据。
    因此对于文件上传在DataGrid中使用进度条组件来显示的时候,前面如果成功上传了某个文件,重新选择文件后,itemRenderer仍然保留了上次文件上传成功的进度(FileReference)。这种情况是因为在进度条组件的监控模式使用了默认的事件侦听的方式(mode=event,可以修改监控模式,采用手工设置的方式,并重载itemRenderer的data属性来避免前面出现的问题。修改DataGrid组件中有进度条一栏的DataGridColumn如下:

<mx:DataGridColumn headerText="上传状态" width="130"> 
<mx:itemRenderer> 
    <mx:Component> 
      <mx:HBox width="130" horizontalGap="2"> 
     <mx:Script>
     <![CDATA[
    override public function set data(value:Object):void{
      super.data = value;
      progress.setProgress(0,data.fileRefrence.size);
      data.fileRefrence.addEventListener(ProgressEvent.PROGRESS,progressHandler);
     }
                                                     
     private function progressHandler(event:ProgressEvent):void{
      progress.setProgress(event.bytesLoaded,data.fileRefrence.size);
     }                                                       
     ]]>
     </mx:Script>

         <mx:ProgressBar id="progress" width="100%" 
         labelPlacement="center" label="%3%%" 
         mode="manual" minimum="0" maximum="{data.fileRefrence.size}"/>
      </mx:HBox> 
    </mx:Component> 
</mx:itemRenderer> 
</mx:DataGridColumn>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics