以下主要是我了解到的<mx:DataGrid 标签中一些属性的使用,希望对正在研究flex的朋友们有点用
下面是相关说明(java及配置部分省略)
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
minWidth="955" minHeight="600" backgroundColor="white"
creationComplete="onComplete()" horizontalAlign="left" layout="vertical"
verticalAlign="top" fontSize="12" xmlns:nsl="*">
<mx:RemoteObject id="userAction" destination="userAction">
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayList;
import flash.external.ExternalInterface;
[Bindable]
public var userArr:Array=new Array();
[Bindable]
public var userColls:ArrayCollection=new ArrayCollection();
private function resultHandler(event:ResultEvent):void {
userColls = event.result as ArrayCollection;
userArr = userColls.toArray();
Alert.show(userArr[1].toString(),"Title");
}
private function onComplete():void{
userAction.getAllUser();
userAction.addEventListener(ResultEvent.RESULT,resultHandler);
}
private function rowNum(oItem:Object,iCol:int):String
{
// Alert.show(iCol+"----"+oItem);
var iIndex:int = userColls.getItemIndex(oItem) + 1;
for(var i:int=0;i<userColls.length;i++){
var user:Object=userColls[iIndex-1];
user.num=iIndex+"";
}
return String(iIndex);
}
]]>
</mx:Script>
<mx:DataGrid id="dataProvider" dataProvider="{userColls}">
<mx:columns>
<mx:DataGridColumn labelFunction="rowNum" headerText="序号"/>//labelFunction对应你想调用的函数,比如说这里是自动为每行生成行号,rowNum为函数名
<mx:DataGridColumn dataField="userName" headerText="姓名"/> //dataField对应集合中对象属性
<mx:DataGridColumn dataField="sex" headerText="性别"/> //headerText对应值随便写
<mx:DataGridColumn dataField="telephone" headerText="电话"/>
<mx:DataGridColumn dataField="address" headerText="地址"/>
</mx:columns>
</mx:DataGrid>
第一种使用dataProvider属性, userColls为mx.collections.ArrayCollection类型
<mx:DataGrid id="dg" dataProvider="{userColls}">
<mx:columns>
<mx:DataGridColumn labelFunction="rowNum" headerText="序号"/> //labelFunction对应你想调用的函数,比如说这里是自动为每行生成行号,rowNum为函数名
<mx:DataGridColumn dataField="userName" headerText="姓名"/>
<mx:DataGridColumn dataField="sex" headerText="性别"/>
<mx:DataGridColumn dataField="telephone" headerText="电话"/>
<mx:DataGridColumn dataField="address" headerText="地址"/>
</mx:columns>
</mx:DataGrid>
或者在mxml方法中使用dg.dataProvider=userColls来赋值(dg为id)
==============================
<mx:DataGrid id="source" >
<mx:dataProvider>
<mx:ArrayCollection id="test" source="{userArr}">
</mx:ArrayCollection>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn labelFunction="rowNum" headerText="序号"/>
<mx:DataGridColumn dataField="userName" headerText="姓名"/>
<mx:DataGridColumn dataField="sex" headerText="性别"/>
<mx:DataGridColumn dataField="telephone" headerText="电话"/>
<mx:DataGridColumn dataField="address" headerText="地址"/>
</mx:columns>
</mx:DataGrid>
第二种使用<mx:ArrayCollection 的source属性,source对应的值必须是和Array相关的类型,如果用这种方式,可以直接把获取到的userColls直接转为Array类型,即userColls.toArray()
=============================
<mx:DataGrid id="list" >
<mx:dataProvider>
<mx:ArrayCollection list="{userColls}" >
</mx:ArrayCollection>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn labelFunction="rowNum" headerText="序号"/>
<mx:DataGridColumn dataField="userName" headerText="姓名"/>
<mx:DataGridColumn dataField="sex" headerText="性别"/>
<mx:DataGridColumn dataField="telephone" headerText="电话"/>
<mx:DataGridColumn dataField="address" headerText="地址"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
第三种方式使用<mx:ArrayCollection 的list属性,list属性对应的值必须是实现或者和IList相关的类型
以上三种最终显示结果一样
使用dataProvider属性可以为任意数据类型,api 中对各种数据相应的转换处理
API节选
public function set dataProvider(value:Object):void
{
if (collection)
{
collection.removeEventListener(CollectionEvent.COLLECTION_CHANGE, collectionChangeHandler);
}
if (value is Array)
{
collection = new ArrayCollection(value as Array);
}
else if (value is ICollectionView)
{
collection = ICollectionView(value);
}
else if (value is IList)
{
collection = new ListCollectionView(IList(value));
}
else if (value is XMLList)
{
collection = new XMLListCollection(value as XMLList);
}
else if (value is XML)
{
var xl:XMLList = new XMLList();
xl += value;
collection = new XMLListCollection(xl);
}
else
{
// convert it to an array containing this one item
var tmp:Array = [];
if (value != null)
tmp.push(value);
collection = new ArrayCollection(tmp);
}
// get an iterator for the displaying rows. The CollectionView's
// main iterator is left unchanged so folks can use old DataSelector
// methods if they want to
iterator = collection.createCursor();
collectionIterator = collection.createCursor(); //IViewCursor(collection);
// trace("ListBase added change listener");
collection.addEventListener(CollectionEvent.COLLECTION_CHANGE, collectionChangeHandler, false, 0, true);
clearSelectionData();
var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);
event.kind = CollectionEventKind.RESET;
collectionChangeHandler(event);
dispatchEvent(event);
itemsNeedMeasurement = true;
invalidateProperties();
invalidateSize();
invalidateDisplayList();
}
分享到:
相关推荐
Flex中的List、DataGrid、Menu 拖动技术以及源码
详细介绍Flex的项目呈现器的各种初级用法以及高级用法,相当实用。
1、flex 是开发swf方法的一种 2、flexBuilder基于eclipse的IDE集成Design、debug动态help 4j:ant脚本 3、flex framework visual components Manager classes RPC/Messaging/Data Service c Utilities 4、MxML ...
based控件的拖放事件 13 运行在AIR中的Flex应用程序的拖放 16 拖放实例 17 例子1:用Canvas作为drop target 17 例子2:指定drag proxy 18 例子3:为drop target处理dragOver和dragExit事件 20 ...
3. 布局界面 4. 使用简单的控件 5. 处理事件 6. 使用远程XML数据 7. 创建类 8. 使用数据绑定和集合 9. 将应用程序拆分成组件 10. 使用DataGroup和List 11. 创建和分派事件 12. 使用DataGrid与项目呈现器 13. 使用...
AS 类绘制边框 以及添加标题 标题框 中的文本
flex3的cookbook书籍完整版dpf(包含目录),目录是我花了两个多小时自己整理的,希望对大家有帮助。 目录: 第一章.Flex与ActionScript基础(3) 1.1节.用FlexBuilder创建Flex项目 1.2节.用FlexBuilder创建Flex库项目 ...
flex dataGrid组件、datagroup组件、list组件、Itemreader详细介绍和用法
每个以列表为基础的组件都有一个默认的项目渲染器 DataGrid,List组件默认每行显示一个文本字符串 创建你自己的项目渲染器,可以自定义外观或行为
利用list的滚动条,通过timer控制。循环滚动显示一个list。 把滚动条隐藏起来,模仿效果
NumericStepper | Spinner | Panel | BorderContainer | TitleWindow | VideoPlayer | DataGrid mx包含组件: Accordion | AdvancedDataGrid | Alert | Border | ColorPicker | DateChooser | HScrollBar | LinkBar...
There is the List control itself, the DataGrid, the Tree, and the visualization classes, which include the charts and the AdvancedDataGrid. By default, the Flex list controls display the data they ...
This package contains 3 kid: 1. a book Developing Flex Applications 2. a web page viewer for doc88 ebt 3. a DDA downloader for doc88.com CONTENTS PART I: Presenting Flex CHAPTER 1: Introducing ...
如何判断ArrayList,Hashtable,SortedList 这类对象是否相等 帮助解决网页和JS文件中的中文编码问题的小工具 慎用const关键字 装箱,拆箱以及反射 动态调用对象的属性和方法——性能和灵活性兼备的方法 消除由try/...