Flex笔记_MX DataGrid、列表和树

ListBase 和 AdvancedListBase

  • 所有的MX List都是从 ListBase 和 AdvancedListBase 派生出来的。
  • 属性：

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFunction、

lockedColumnCount、lockedRowCount、rowCount、rowHeight、selectable、selectedIndex、

selectedIndices、selectedItem、selectedItems、variableRowHeight、wordWrap

  • 事件：

change、dataChange、itemClick、itemDoubleClick、itemRollOut、itemRollOver

数据源，集合与 dataProvider

  • dataProvider 封装了一个在提供的数据集合上运行的for循环，按照顺序将集合中的一个对象分配给下一个项渲染器。
  • 这种组件也被称为数据驱动控件。

填充 dataProvider:

  • 可能是低级的对象，如Array、Boolean或String；
  • 但扩展了ListCollectionView的数据类型（如ArrayCollection）填充dataProvider更合适。
  • 集合可以被看做是内置了排序及过滤功能的高级数组。此外，集合还为使用dataProvider的对象提供了通用的即插即用接口。
  • 集合能在其数据发生变化时，触发dataChange事件，绑定到该集合的任何组件都会自动监听这个事件，据此更新自己的视觉状态。
  • dataChange事件是一个可绑定的事件，其它组件可以进行监听，并在事件被分发时执行某种处理或操作。
  • 集合在其状态发生变化时，会自动使用它的组件发送通知，以便这些组件刷新显示的数据。为此，集合会以广播的形式发布表示变化的事件。

集合的类型：

  • ArrayCollection：基于Array构建的一种主要的集合类型；
  • XMLListCollection：在封装XML及XMLList对象的基础上添加了标准的集合功能；
  • GroupCollection：用于AdvanceDataGrid，分组数据。

集合的使用者：

AdvancedDataGrid、ButtonBar、Charting components including、Legends、ColorPicker、ComboBox、

Menu、MenuBar、OLAPDataGrid、PopUpMenuButton、Repeater、TabBar、DataGrid、DateField、

HorizontalList、LinkBar、List、TileList、ToggleButtonBar、Tree

集合的初始化

  • 使用关联标签的MXML方法：
<s:ArrayCollection id="myAC">
<fx:Object label="item1" data="data1"/>
<fx:Object label="item2" data="data2"/>
<fx:Object label="item3" data="data3"/>
</s:ArrayCollection>
  • 使用ActonScript初始化：
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var myAc:ArrayCollection = new ArrayCollection([
{ label:"item1", data:"data1"},
{ label:"item2", data:"data2"},
{ label:"item3", data:"data3"}
]);
]]>
</fx:Script>

集合的填充

  • 一般会从某些中间层应用服务器处获得数据来动态的填充基于List的控件。
  • 简单的讲，可以通过HTTP连接获取XML数据、或者通过调用WebService（ColdFusion、LCDS、AMFPHP）函数，使用RemoteObject（Flex的二进制数据传输机制）加载数据。
  • 在数据返回后，需要将其转换成基于List的组件可以被监听的集合。

List组件：

  • 硬编码方式
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<mx:List id="myFriends" x="10" y="10">
<fx:String>friend 1</fx:String>
<fx:String>friend 2</fx:String>
<fx:String>friend 3</fx:String>
</mx:List>
</s:Application>
  • 组件方式
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<s:ArrayCollection id="myAC">
<fx:Object label="friend 1"/>
<fx:Object label="friend 2"/>
<fx:Object label="friend 3"/>
</s:ArrayCollection>
</fx:Declarations>

<mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}">
</mx:List>
</s:Application>
  • ActionScript方式
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{label:"friend 1"},
{label:"friend 2"},
{label:"friend 3"}
]);
]]>
</fx:Script>

<mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}">
</mx:List>
</s:Application>
  • labelField属性指定要显示的数据列
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"friend 1"},
{name:"friend 2"},
{name:"friend 3"}
]);
]]>
</fx:Script>

<mx:List id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name">
</mx:List>
</s:Application>

HorizontalList组件

  • 常用于应用程序中并排显示图像，如产品选择表或照片查看器的缩略图。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"friend 1"},
{name:"friend 2"},
{name:"friend 3"}
]);
]]>
</fx:Script>

<mx:HorizontalList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"/>
</s:Application>

TileList组件

  • 创建大小相同的拼贴快（tile）。
  • 分方向：水平方向、垂直方向。各方向上内容超过视图显示范围的会显示相应方向上的滚动条，具体要看direction属性是怎么设置的。
  • columnCount 和 rowCount属性可以控制每个视图显示的行数或列数。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"friend 1"},
{name:"friend 2"},
{name:"friend 3"},
{name:"friend 4"},
{name:"friend 5"},
{name:"friend 6"},
{name:"friend 7"},
{name:"friend 8"}
]);
]]>
</fx:Script>

<mx:TileList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"
direction="vertical"/>
</s:Application>
  • columnWidth 和 rowHeight 属性可以控制tile块的大小，避免显示不全

<mx:TileList id="myFriends" x="10" y="10" dataProvider="{myAC}" labelField="name"

direction="vertical" columnWidth="150" rowHeight="100"/>

  • TileList组件和Tile组件很像，但存在性能差异：前者会动态渲染进入的数据项，可以减少渲染占用的内存；后者的子对象会一次性全部被渲染，占用CPU较高。

DataGrid 组件

  • 附加属性：resizeableColumns（默认为true），sortableColumns（默认为true）
  • 调用DataGrid：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<mx:DataGrid id="dg" width="500" height="200">
<mx:dataProvider>
<fx:Object name="item1" email="[email protected]"/>
<fx:Object name="item2" email="[email protected]"/>
<fx:Object name="item3" email="[email protected]"/>
</mx:dataProvider>
</mx:DataGrid>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"item1", email:"[email protected]", url:"www.url1.com"},
{name:"item2", email:"[email protected]", url:"www.url2.com"},
{name:"item3", email:"[email protected]", url:"www.url3.com"},
]);
]]>
</fx:Script>

<mx:DataGrid id="dg" width="500" height="150" dataProvider="{myAC}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Contact Name" width="300" />
<mx:DataGridColumn dataField="email" headerText="E-Mail" width="200" />
<mx:DataGridColumn dataField="url" headerText="Web Site" width="200" />
</mx:columns>
</mx:DataGrid>
</s:Application>
  • sortableColumns属性控制整个DataGrid组件能否进行排序；
  • sortable属性控制 DataGridColumn 能否进行排序。
  • DataGridColumn支持的所有属性：

dataField、headerText、headerWordWrap、labelFunction、minWidth、resizeable、

sortable、sortCompareFunction、sortDescending（true：降序，false：升序）、

visible、width、wordWrap（启用需确保DataGrid组件的 variableRowHeight属性被设置为true）

Tree组件

  • List组件的后代。
  • 使用层次化数据：XML是一种按照嵌套结构组织数据的结构；Flex3中，XML和XMLList对象多少有一点冗余，所以Flex4中删除了XML对象，取而代之的是使用XMLList和XMLListCollection对象。
  • XMLList只能在<fx:Declarations/>标签中声明；通过source属性，也能从一个单独的文件中导入。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<fx:XMLList id="myXML">
<friends>
<friend name="Item1"/>
<friend name="Item2"/>
<friend name="Item2"/>
</friends>
</fx:XMLList>
</fx:Declarations>
</s:Application>
<mx:XMLList source="my.xml" id="myXML"/>
  • XMLListCollection 负责包装 XMLList 对象，并添加 ICollection 实现的功能。
  • 在数据可能发生变化的情况下，应该使用集合，这样就可以在发生变化时通知那些使用了dataProvider属性绑定了该数据的组件更新其视图。
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<mx:XMLListCollection id="myXMLCollection">
<fx:XMLList id="myXML" xmlns="">
<friends label="Friends">
<friend label="Friend"/>
</friends>
<families label="Families">
<family label="Family"/>
</families>
</fx:XMLList>
</mx:XMLListCollection>
</fx:Declarations>
</s:Application>
  • 调用Tree组件：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<mx:XMLListCollection id="myXMLCollection">
<fx:XMLList id="myXML" xmlns="">
<friends label="Friends">
<friend label="Friend1"/>
<friend label="Friend2"/>
<friend label="Friend3"/>
</friends>
<families label="Families">
<family label="Family1"/>
<family label="Family2"/>
</families>
</fx:XMLList>
</mx:XMLListCollection>
</fx:Declarations>
<mx:Tree dataProvider="{myXMLCollection}"
labelField="@label"
width="300" height="200"/>
</s:Application>

与基于List的MX组件交互

  • 列表事件：

click、doubleClick、itemClick、change

  • 向函数传递事件：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ItemClickEvent;
import mx.events.ListEvent;
import mx.controls.Alert;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
{name:"item1",email:"[email protected]"},
{name:"item2",email:"[email protected]"}
]);

public function contactDataGrid_clickHandler(event:ListEvent):void {
Alert.show("You have clicked on row " + event.rowIndex + " and col "
+ event.columnIndex + "." + "Witch is for " +
event.currentTarget.selectedItem.name);
}
]]>
</fx:Script>
<mx:DataGrid id="contactDataGrid" width="500" height="150"
dataProvider="{myAC}"
itemClick="contactDataGrid_clickHandler( event )">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Contact Name" width="300"/>
<mx:DataGridColumn dataField="email" headerText="E-mail" width="200"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
  • 向函数传递数据：

itemClick="contactDataGrid_clickHandler( event.currentTarget.selectedItem )"

  • 直接访问被选定的行：

itemClick="contactDataGrid_clickHandler()

...

public function contactDataGrid_clickHandler():void {

Alert.show("Name : " + contactDataGrid.selectedItem.name);

}

  • 绑定到被选定的行（或者说直接显示）

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

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

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.ListEvent;

[Bindable]

public var myAC:ArrayCollection = new ArrayCollection([

{name:"item1",email:"[email protected]"},

{name:"item2",email:"[email protected]"}

]);

]]>

</fx:Script>

<s:VGroup>

<mx:DataGrid id="contactDataGrid" width="500" height="150"

dataProvider="{myAC}">

<mx:columns>

<mx:DataGridColumn dataField="name" headerText="Contact Name" width="300"/>

<mx:DataGridColumn dataField="email" headerText="E-mail" width="200"/>

</mx:columns>

</mx:DataGrid>

<s:Label text="{contactDataGrid.selectedItem.name}"/>

</s:VGroup>

</s:Application>

时间： 2024-10-15 15:00:10

Flex笔记_MX DataGrid、列表和树的相关文章

（二）《机器学习》（周志华）第4章 决策树 笔记 理论及实现——“西瓜树”——CART决策树

CART决策树 (一)<机器学习>(周志华)第4章 决策树 笔记 理论及实现--"西瓜树" 参照上一篇ID3算法实现的决策树(点击上面链接直达),进一步实现CART决策树. 其实只需要改动很小的一部分就可以了,把原先计算信息熵和信息增益的部分换做计算基尼指数,选择最优属性的时候,选择最小的基尼指数即可. #导入模块 import pandas as pd import numpy as np from collections import Counter #数据获取与处理

HTML&CSS基础学习笔记13—无序列表

无序列表 有时我们的工作繁忙,杂事很多,怕忘记,就会把事情一件件列出来,防止忘记. 它们的排列顺序对于我们来说并不重要,可以随意调换,我们将它称为无序列表,HTML里用<ul>标签来表示无序列表,列表里的项目则用<li>标签来表示: 1 2 3 4 5 <ul>     <li></li>     <li></li>     ... </ul> 看一段实例代码: 对于的浏览器显示结果是这样的: 更多内容学习,请

Flex中的DataGrid报错（一）

1.错误描述    此行的多个标记: -holeNum -1105: 赋值的目标必须是引用值. 2.错误原因    detailWindow.holeNum.toString() = "20140730"; 3.解决办法 Flex中的DataGrid报错(一),布布扣,bubuko.com

Flex中的DataGrid报错（二）

1.错误描述 此行的多个标记: -holeNum -1067: String 类型值的隐式强制指令的目标是非相关类型 mx.controls:Text. 2.错误原因  将字符串类型赋值给Text类型 3.解决办法 Flex中的DataGrid报错(二),布布扣,bubuko.com

python学习笔记3：列表和元组

python学习笔记3:列表和元组 一.列表 list 总结:列表是可变变量,可以通过下标修改元素的值 1.定义列表 -- 中括号[ ] name=['Lily','Lucy','meimei'] 2.下标取值 --正负数均可 3.在列表中添加值 1)append() 方法,在列表末尾添加一个值 2)insert()方法,在列表指定位置添加一个值 3)extend()方法,把一个列表追加到一个列表的末尾            4.从列表中删除值 1)pop() 方法,默认删除最后一个元素,并且返

day5_python学习笔记_chapter6_字符串列表元组

1. 序列:seq[n], seq[x:y], seq * n序列重复n次,切片, 序列翻转 s="abcde", s[::-1]="edcba" 内建函数:1. 类型转换: list(iter), str(obj), unicode(obj), tuple(iter) , 2. len(seq), max(), min() , reversed(), sorted(), sum(), 2. 字符串: in ,not in ,,, import string , s

笔记︱决策树族——梯度提升树(GBDT）

笔记︱决策树族--梯度提升树(GBDT) 本笔记来源于CDA DSC,L2-R语言课程所学进行的总结. 一.介绍:梯度提升树(Gradient Boost Decision Tree) Boosting算法和树模型的结合.按次序建立多棵树,每棵树都是为了减少上一次的残差(residual),每个新的模型的建立都是为了使之前模型的残差往梯度方向减少.最后将当前得到的决策树与之前的那些决策树合并起来进行预测. 相比随机森林有更多的参数需要调整. ---------------------------

《ACM/ICPC 算法训练教程》读书笔记 之 数据结构（线段树详解）

依然延续第一篇读书笔记,这一篇是基于<ACM/ICPC 算法训练教程>上关于线段树的讲解的总结和修改(这本书在线段树这里Error非常多),但是总体来说这本书关于具体算法的讲解和案例都是不错的. 线段树简介 这是一种二叉搜索树,类似于区间树,是一种描述线段的树形数据结构,也是ACMer必学的一种数据结构,主要用于查询对一段数据的处理和存储查询,对时间度的优化也是较为明显的,优化后的时间复杂为O(logN).此外,线段树还可以拓展为点树,ZWK线段树等等,与此类似的还有树状数组等等. 例如:要将

JQuery EasyUI DataGrid列表所见所得随意导出excel

1.抽取DataGrid列表数据 function ExportNormal(strXlsName, exportGrid, postUrl, hiddenColumns) { /// <summary> /// 提交DataGrid数据 /// </summary> var f = $('<form action="' + postUrl + '?ac=normal" method="post" id="fmExport1&