Flex4在datagrid单元格中添加按钮/图片等丰富内容

原创 2012年03月26日 13:33:18

1,添加按钮

<s:DataGrid width="100%" height="100%">
	<s:columns>
		<s:GridColumn headerText="维护" >
			<s:itemRenderer>
				<fx:Component>
					<s:GridItemRenderer>
						<s:HGroup verticalAlign="middle" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
						       <s:Button label="删除" width="50"/>
						       <s:Button id="modifyBtn" label="修改" width="50" click="outerDocument.modifyBtn_clickHandler(event)"/>
						       <s:Button label="查看" width="50"/>
						</s:HGroup>
					</s:GridItemRenderer>
				</fx:Component>
			</s:itemRenderer>
		</s:GridColumn>
	</s:columns>
</s:DataGrid>

单元格中的按钮单击事件调用时必须在方法前加上outerDocument,不然会找不到该方法。因为添加<fx:Component>标签相当于嵌入了一个页面。

2,有时需要根据单元格获得的数据以图表或者不同颜色来呈现,则要用到项呈示器

新建一个项呈示器

模版选择Spark DataGrid的项呈示器

<1>添加数据改变事件

<2>然后绘制你想要的图表或者一组css样式来填充单元格的背景

<3>

protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
{
             getChart(data);//data是GridItemRenderer的属性,也就是是单元格获得的数据,为Object类型
}

private function getChart(obj:Object)

{

            //这时就可用从data中获得的数据绑定到你的图表或者背景中了

}


Flex4 DataGrid 中添加编辑和删除按钮

目的是在一个DataGrid里实现点击按钮进行对DataGrid这一行的修改和删除。不多说直接上代码,看样式: public var users:ArrayCollection=new Ar...

FLEX里DataGrid单元格渲染

  • 2012年09月11日 15:24
  • 9KB
  • 下载

Flex DataGrid双击编辑单元格

flex中的DataGrid是支持单击编辑单元格内容的,不过这确实不够方便,单击是选中数据的,怎么能变成修改呢!在网上查了看,利用一个DataGrid组件,可以实现双击修改 此组件源码为: ...

Flex 自定义 datagrid 单元格 字体

  • sutaizi
  • sutaizi
  • 2011年08月22日 19:57
  • 1690

flex控制datagrid单元格可编辑

xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/m...

EasyUI学习系列(一)——Datagrid单元格按钮

首先引用EasyUI文档关于formatter相关知识 属性名称 属性值类型 描述 formatter function 单元格formatter(格式化器)函数,带3个参数: value...
  • TimeAce
  • TimeAce
  • 2015年01月14日 16:17
  • 457

FLEX4 TitleWindow 添加帮组按钮(最大化、最小化相同)使用皮肤更改

最近发现需求需要在每个flex弹出框口上有一个“问号”按钮,实现帮助功能。在网上搜了一下,对于flex3版本的通过override createChildren 方法来添加,但是由于项目是flex4版...
  • spyiu
  • spyiu
  • 2013年12月26日 09:58
  • 3129

Flex4 DataGrid分页机制例析

首先要声明DataGrid控件 如下所示: 然后加上一些上一页,下一页,第一页,最后一页等跳转按钮 如下所示: 0?(currentPage+1):0...

Flex4中DataGrid,itemrender 多行多列值控制

写了一个简单的Demo,目的是帮助大家初步了解itemrender的使用,以及如何对多行数据同时操作。 Demo操作过程。 1. DataGrid为3列,第一列是check box. 2...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Flex4在datagrid单元格中添加按钮/图片等丰富内容
举报原因:
原因补充:

(最多只允许输入30个字)