flex DataGroup
示例1:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="200" height="100%" dataProvider="{dataArr}" creationComplete="datagroup1_creationCompleteHandler(event)">
<s:layout>
<s:VerticalLayout gap="1" useVirtualLayout="true" paddingLeft="2" paddingRight="2" />
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
public var dataArr:ArrayCollection protected function datagroup1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub } ]]>
</fx:Script>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="195" height="30" click="itemrenderer1_clickHandler(event)" dataChange="itemrenderer1_dataChangeHandler(event)" > <fx:Script>
<![CDATA[
import com.AppEvent; import mx.events.FlexEvent;
[Bindable]
private var tempdata:Object; protected function itemrenderer1_clickHandler(event:MouseEvent):void
{
AppEvent.dispatch("menu_selected",data);
for each(var o:Object in outerDocument.dataArr)
{
o.selected=false;
}
data.selected=true;
outerDocument.dataArr.refresh();
} protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
{
//tempdata=data;
} ]]>
</fx:Script> <s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states> <s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5" visible="{!data.selected}">
<s:fill>
<s:SolidColor color="#92CDEA" color.hovered="#65A3FF" alpha="0.9" alpha.hovered="1" />
</s:fill>
</s:Rect>
<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5" visible="{data.selected}">
<s:fill>
<s:SolidColor color="#65A3FF" />
</s:fill>
</s:Rect>
<s:Label id="txtStart" text="{data.label}" buttonMode="true" useHandCursor="true"
fontSize="16" color="#FFFFFF" fontFamily="微软雅黑" left="20" verticalCenter="2" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
注意:
<s:ItemRenderer width="195" height="30" autoDrawBackground="false" 这里如果给了宽度和高度那么,每一项就固定死了,如果不给就是活的。
示例2:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" dataProvider="{dataArr}" creationComplete="datagroup1_creationCompleteHandler(event)">
<s:layout>
<s:TileLayout verticalGap="20" horizontalGap="20" horizontalAlign="left" paddingLeft="20" paddingTop="6"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
public var dataArr:ArrayCollection protected function datagroup1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub } ]]>
</fx:Script>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer autoDrawBackground="false" click="itemrenderer1_clickHandler(event)" dataChange="itemrenderer1_dataChangeHandler(event)" > <fx:Script>
<![CDATA[
import com.esri.viewer.AppEvent; import mx.events.FlexEvent;
[Bindable]
private var tempdata:Object; protected function itemrenderer1_clickHandler(event:MouseEvent):void
{
AppEvent.dispatch("xzq2_selected",data);
for each(var o:Object in outerDocument.dataArr)
{
o.selected=false;
}
data.selected=true;
outerDocument.dataArr.refresh();
} protected function itemrenderer1_dataChangeHandler(event:FlexEvent):void
{
//tempdata=data;
} ]]>
</fx:Script> <s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states> <s:Rect id="hoveredBorder" left="-4" right="-4" top="-6" bottom="-4" radiusX="2" radiusY="2" includeIn="hovered">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="#53C500" ratio="0" />
<s:GradientEntry color="#52b0e8" ratio="1" />
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:SolidColor color="#65A3CE" alpha="0.1"/>
</s:fill>
</s:Rect> <s:Rect id="SelectedBorder" left="-4" right="-4" top="-6" bottom="-4" radiusX="2" radiusY="2" visible="{data.selected}">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<s:GradientEntry color="#53C500" ratio="0" />
<s:GradientEntry color="#52b0e8" ratio="1" />
</s:LinearGradientStroke>
</s:stroke>
<s:fill>
<s:SolidColor color="#65A3CE" alpha="0.1"/>
</s:fill>
</s:Rect>
<s:Label text="{data.name}" verticalCenter="0" horizontalCenter="0"
maxDisplayedLines="1" toolTip="{data.label}" fontFamily="微软雅黑"
fontSize="14" buttonMode="true" color="0x348D9B"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
注意:
如果要滚动条那么要这样:
<s:Scroller width="290" height="150" left="10">
<HeaderController:xzqTiledDataGroup left="10" dataArr="{dataArr2}" width="290" height="150"/>
</s:Scroller>
flex DataGroup的更多相关文章
- Flex4 vs Flex3: Repeater vs DataGroup
repeaters太老土了!如果你过去使用过它,你会发出这种感概.现在,我们终于要摆脱它了.Repeaters不仅有沉重的组件,而且接合使用很不方便.那么,Flex 4中有什么可以帮助我们吗?Data ...
- Flex 容器基本概念
申明文章出处:http://www.adobe.com/cn/devnet/flex/articles/flex-containers-tips.html Flex 4 容器可以提供一套默认的布局:B ...
- flex 4 布局样式
Flex 4 样式与布局 第一篇 Flex 4 与自定义布局(Layout) Flex 4/Spark组件架构的新功能之一是可以定制一个容器的布局而不必改变容器本身.您需要做的就是定义一个自定义布局. ...
- Flex学习总结
Flex SDK Flex框架类库.Flex编译环境.调式器.MXML.ActionScript编程语言以及其它工具组成,Flash Builder是其开发环境, Flash Player的工作模 ...
- flex控件总结
Flex基本控件总结 一.flex控件的分类:文本控件(text controls).数据源控件(data provider controls).菜单控件 (menu controls) ...
- Flex元素布局规则总结,以及布局和容器
一.Flex中的元素分类从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button.Ch ...
- OpenCASCADE Expression Interpreter by Flex & Bison
OpenCASCADE Expression Interpreter by Flex & Bison eryar@163.com Abstract. OpenCASCADE provide d ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- Flex 布局教程:实例篇
该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...
随机推荐
- ubuntu安装rpm格式软件包
转载自:http://os.51cto.com/art/200708/53942.htm ubuntu的软件包格式是deb,如果要安装rpm的包,则要先用alien把rpm转换成deb.用alien转 ...
- Windows重装系统
本文主要针对那些不会重装系统windows的用户,虽然重装系统win7或win10很简单,但是还是有一些小白不明白如何安装新系统,也不清楚有几种安装方式.本教程现在就详细的讲讲利用U盘重装系统的具体步 ...
- Docker URL REST API访问设置
Docker daemon 绑定到该端口上. 默认情况下,docker daemon使用unix socket(unix:///var/run/docker.sock) 1.先停止docker dae ...
- Android下ListView的分页(9.6)
1 http://www.cnblogs.com/noTice520/archive/2012/02/10/2345057.html 2 http://www.92coding.com/blog/in ...
- ASP.NET基本对象介绍
ASP.NET能够成为一个庞大的软件体系,与它提供了大量的对象类库有很大的关系.这些类库中包含许多封装好的内置对象,开发人员可以直接使用这些对象的方法和属性,因此用较少的代码量就能轻松完成很多对象. ...
- MQTT--Mosquitto的配置文件
Mosquitto的配置文件存放在/etc/mosquitto/mosquitto.conf 配置文件具体的配置内容为: # ===================================== ...
- php代码中使用换行及(\n或\r\n和br)的应用
浏览器识别不了\n或\r\n,这两个换行符是文本换行符,文本文件有效;假设须要将结果输出到浏览器或打印到显示器,代码中使用br;假设仅仅是在源码中换行.则使用\n或\r\n,感兴趣的朋友能够了解下,也 ...
- mysql innodb_data_file_path配置增加
在配置innodb_data_file_path=ibdata1:200M:autoextend时,想增加空间,默认文件不断增加直到200M,如果要增加大小,直接修改参数增加大小会报错: auto-e ...
- YUV420视频上面添加字幕
1.source_codemain.c中实现了函数draw_Font_Func(),这个函数可以直接移植到C程序中使用.zimo.h里面放的是字模转码后的数据. 2.data_yuv测试用的yuv42 ...
- [转载]Axis2 and CXF的比较
在Celtix 和XFire 宣布合并的同年,另一个著名开源Web 服务框架Axis 的后继者Axis2 也诞生了.Axis2 并非Axis 的2.0 版,而是完全重写了Axis 的新项目.作为功能和 ...