`

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>

分享到:
评论

相关推荐

    silverlight DataGrid 外置滚动条

    在本文中,我们将深入探讨Silverlight中的DataGrid控件,特别是如何实现外置滚动条以及如何结合使用DataPager分页控件。Silverlight是微软推出的一种富互联网应用程序(RIA)平台,它允许开发者创建交互性强、用户...

    wpf datagrid滑动条

    本篇将详细介绍如何在WPF的`DataGrid`中实现滚动条功能,以及一些相关的高级技巧。 1. **基本滚动条设置** - 默认情况下,如果`DataGrid`的内容超过了其可视区域,WPF会自动添加垂直滚动条。但如果你需要自定义...

    (datagrid)4种滚动条对齐解决方案

    本篇文章将详细介绍四种解决`DataGrid`滚动条对齐问题的方案,旨在帮助开发者创建更加用户体验友好的数据展示页面。 ### 方案一:CSS样式调整 首先,我们可以利用CSS来调整`DataGrid`的样式,确保标题和内容列始终...

    WPF中自定义Scrollbar 滚动条 样式 图片

    在Windows Presentation Foundation (WPF) 中,滚动条(Scrollbar)是用户界面中常见的元素,用于在内容超过可视区域时提供导航。默认情况下,滚动条具有系统定义的样式,但WPF的强大之处在于允许开发者根据需求自定义...

    wpf DataGridStyle

    本文将深入探讨如何自定义`DataGrid`的列标题样式、行样式、鼠标悬浮及选择样式,以及滚动条的样式,帮助你创建独特且美观的用户界面。 ### 自定义列标题样式 `DataGrid` 的列标题默认样式可以使用`...

    wpf滚动条样式

    在Windows Presentation Foundation(WPF)中,滚动条是用户界面中的一个重要组件,它允许用户查看和导航超过屏幕显示范围的内容。本主题将深入探讨如何自定义WPF滚动条的样式和模板,以实现独特的视觉效果。 首先...

    WPF拖动DataGrid滚动条时内容混乱的解决方法

    然而,在实际使用中,尤其是在处理大量数据或使用模板列时,可能会遇到一个常见的问题:当用户拖动滚动条时,DataGrid的内容显示出现混乱。这个问题通常发生在DataGrid的CellTemplate中,特别是当使用TextBox或...

    Wpf DataGrid 合计行,并在最下方

    wpf的DataGrid中,添加某一列的合计,并在最下方固定显示。本列子不使用ToolKit(有3.5和4.0的限制),添加一个类,重写DataGrid。可以在DataGrid上下左右绑定一个DataGrid,类似Footer属性。示例可直接运行,简单...

    easyui datagrid中实现上下左右、回车切换单元格

    easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格

    2.0DataGrid嵌套DataGrid,里面的鼠标滚动响应到外部,利用自定义命令传递滚轮事件参数实现

    2.0DataGrid嵌套DataGrid,里面的鼠标滚动响应到外部,利用自定义命令传递滚轮事件参数实现,详细效果请移步: https://blog.csdn.net/u010438205/article/details/105710794

    easy ui datagrid项目完整源代码

    《jQuery Easy UI Datagrid 完整项目源代码详解》 jQuery Easy UI 是一款基于 jQuery 的前端框架,它提供了一系列的组件,使得开发者...同时,了解 Datagrid 的工作原理也有助于我们在遇到问题时能够快速定位并解决。

    设置datagrid行背景色示例

    每条数据记录都会映射到 `Datagrid` 的一行。 2. **创建自定义 `Datagrid` 子类**:在子类中,你可以重写或扩展渲染器(renderer)的逻辑,渲染器负责显示每个单元格的内容。为了改变行背景色,我们需要自定义行...

    c# WPF DataGrid 底部汇总行合计

    无论采用哪种方法,都需要注意处理滚动条的问题。确保当用户滚动DataGrid时,汇总行始终保持在可视区域的底部,这可能需要调整DataGrid的布局和大小设置。 最后,对于DataGrid的性能优化,我们应该避免在每次数据源...

    WPF操作滚动条

    WPF操作的滚动条,ListView默认的滚动条在动态添加新项时会向上跑,影响客户,相应的博客地址http://blog.csdn.net/pfe_nova/article/details/17241129

    easyui的datagrid生成合并行,合计计算价格

    在描述中提到的"easyui的datagrid生成合并行,合计计算价格",指的是如何使用EasyUI的DataGrid组件来实现表格数据的行合并以及总价的计算功能。以下是对这个知识点的详细解释: 1. EasyUI DataGrid组件: EasyUI的...

    WPF.DataGrid.MergeRow

    - 由于DataGrid的布局机制,合并可能会导致滚动条的显示不正确,需要额外处理。 - 数据源的更新可能需要同步更新合并状态,避免数据和视图不一致。 通过上述步骤,你可以实现WPF DataGrid的行单元格合并功能。...

    easyui帮助手册datagrid

    3. **fitColumns**:若设置为 `true`,Datagrid 会自动调整列宽以适应整个表格,避免出现水平滚动条。 4. **striped**:启用此属性后,行将交替显示不同的背景色,提供视觉上的区分。 5. **method**:设置请求数据...

    easyui datagrid 右冻结

    4. **处理滚动事件**:监听datagrid的滚动事件,根据滚动条的位置更新固定列的CSS属性,确保它们始终可见。 5. **兼容RTL布局**:如果需要,使用`easyui-rtl.css`和`easyui-rtl.js`提供的样式和函数,确保在RTL环境...

    datagrid 4种解决table对齐

    对于压缩包内的“4中滚动条案例”,这可能是为了展示在不同滚动条设置下的对齐解决方案,例如固定表头、同步滚动等,这些案例可以帮助开发者更好地理解和实践上述对齐策略。在实际操作时,务必根据项目需求进行选择...

Global site tag (gtag.js) - Google Analytics