注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Flex 技术博客

醉里挑灯看剑,梦回吹角连营

 
 
 

日志

 
 

Flex DataGrid数据的多种显示方式  

2008-06-11 16:35:26|  分类: Flex 应用 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

Flex DataGrid单元格显示数据有多种方式。

1.默认的是截取模式,就是对于显示不下的内容进行自动截取,会被下一列所遮盖。看下图:

2. 但是有时候我们需要能够方便的显示所有内容,但又不希望这一列变得很宽。有一个方法就是自动隐藏该单元的内容,对于数据量大的自动在后面加...,当鼠标移动到该单元格上时,能够以ToolTip的形式完全显示该单元的内容,这个我们可以采用将Label作为该列的itemRenderer办法,具体效果如下:

3. 有时候我们需要DataGrid的每行内容能够显示全所有的内容,如果该列的内容比较多,那么我们希望能够自动换行显示在该列中。其实很简单,我们可以利用DataGridColumn的wordWrap属性,设为true之后的效果如下

效果2的代码如下:实际上只要设定itemRenderer="mx.controls.Label"就可以了

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="vertical">  

    <mx:Array id="arr">

        <mx:Object articleName="Finding out a characters Unicode character code" data="15" />

        <mx:Object articleName="Setting an icon in an Alert control" data="14" />

        <mx:Object articleName="Setting an icon in a Button control" data="13" />

        <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />

        <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />

        <mx:Object articleName="Using the Alert control" data="8" />

        <mx:Object articleName="Formatting data tips in a Slider" data="7" />

        <mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" />

    </mx:Array>

    <mx:ArrayCollection id="arrColl" source="{arr}" />

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">

        <mx:columns>

            <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" itemRenderer="mx.controls.Label" />

            <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />

        </mx:columns>

    </mx:DataGrid>

</mx:Application>

效果3的代码如下:实际上只要设定wordWrap="true"就可以了

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="vertical">  

    <mx:Array id="arr">

        <mx:Object articleName="Finding out a characters Unicode character code" data="15" />

        <mx:Object articleName="Setting an icon in an Alert control" data="14" />

        <mx:Object articleName="Setting an icon in a Button control" data="13" />

        <mx:Object articleName="Installing the latest nightly Flex 3 SDK build into Flex Builder 3" data="10" />

        <mx:Object articleName="Detecting which button a user pressed to dismiss an Alert dialog" data="9" />

        <mx:Object articleName="Using the Alert control" data="8" />

        <mx:Object articleName="Formatting data tips in a Slider" data="7" />

        <mx:Object articleName="Downloading the latest Adobe Labs version of Flex 3 SDK/Flex Builder 3 (codename: Moxie)" data="6" />

    </mx:Array>

    <mx:ArrayCollection id="arrColl" source="{arr}" />

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" variableRowHeight="true" width="100%" height="100%">

        <mx:columns>

            <mx:DataGridColumn id="articleName" dataField="articleName" headerText="Name of the article in question" wordWrap="true" />

            <mx:DataGridColumn id="data" dataField="data" headerText="ID of the article" />

        </mx:columns>

    </mx:DataGrid>

</mx:Application>

 

  评论这张
 
阅读(4527)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017