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>
分享到:
相关推荐
Flex DataGrid从XML文件中加载数据
flex 通过读取xml文件 实现动态DataGrid数据列表
Flex dataGrid 全选、反选 checkBox 不是很完善,但很有借鉴意义
将flex中datagrid组件中数据导出到excel表格中。思路很简单,利用as将datagrid中的数据解析出来,传到后台java服务端处理,即可保存为excel文件。
flex中dataGrid导出数据到excel中,不存在乱码问题
通过itemrender实现flex datagrid中显示序列号
这个分页只与后台交互一次,然后将获得的集合在前台进行分页显示。
flex datagrid资料,下载的别人的,想弄点分数啊
flex datagrid 实现合计功能控件包 带源码,demo fxp是flex4的工程文件,导入到工作空间即可 直接导入项目即可。 更多访问我的blog www.dplayer.net
flex datagrid 改变指定行的背景颜色,可直接使用
felx和springHibernate整合传递二进制数据到表中并在flex的dataGrid控件中显示的实践
NULL 博文链接:https://lqw.iteye.com/blog/537409
原理就是ArrayCollection的filterFunction的使用。是根据老外一个帖子改的,其他下载地址在 :http://www.zuidaima.com/share/1714555305004032.htm
成功的实现了,datagrid中嵌套checkbox实现全选的功能。分享代码供大家分享。项目为flex3。
在FLEX4中开发带有过滤功能的DATAGRID组件
flex Datagrid checkbox全选 Datagrid
NULL 博文链接:https://windmark.iteye.com/blog/1716422
可以通过简单的一个标签实现一个表的checkbox功能,当然我才学了不到一个星期,可以在原来的基础上进行扩展,希望交流下我的邮箱是llaysz@163.com,如果大家把它变强大了记得给我发一份谢谢了
FLEX的datagrid合计、平均值,很好的例子代码拿来就可以用
Flex DataGrid 改变某一行的背景颜色,自定义的DataGrid组件