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中获得的数据绑定到你的图表或者背景中了

}


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Flex中DataGrid列中添加按钮

不多说了,具体代码贴出来:1、在最后一列,添加了按钮,按钮上面的文字根据从数据库返回的值 分别显示“锁定”、“解锁”两种状态;  <mx:Module xmlns:fx="http://ns.ado...

FLEX 4.6 Spark DataGrid 一些的用法

Datagrid是我们比较常用的一个控件,在FLEX3中的,我想网上的资料很多。到了4.5后换成Spart可能有些用法不用上了,在网上查了一些例子,整合在一起,当给自己作个笔记,也希望能对别人有个参考...

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

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

FLEX里DataGrid单元格渲染

Flex DataGrid双击编辑单元格

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

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

首先引用EasyUI文档关于formatter相关知识 属性名称 属性值类型 描述 formatter function 单元格formatter(格式化器)函数,带3个参数: value...

Flex 自定义 datagrid 单元格 字体

<![CDATA[ override public function set data(value:Object) : void { ...

flex控制datagrid单元格可编辑

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

EasyUI 给datagrid单元格添加onmouseover事件

1、前端网页代码,设置EasyUI的datagrid: tableid="tt"class="easyui-datagrid"style="width:700px;height:500px;font...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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