- 浏览: 98109 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
chensong215:
无法获取到ProgressEvent中的bytesTotal
自定义DownloadProgressBar -
qq2464785999:
非常感谢。
测试后,发现要用相对路径的话,好像要这么写
va ...
Flex写XML文件
FLEX中使用AS动态创建DataGrid
2010年2月6日 17:48 查看评论(2) 分类:技术文章 Tags:as3 flex
初学FLEX时,需要在AS里动态生成DataGrid,结果搞了很久才搞明白怎么把用MXML写出来的DataGrid改成用AS写出来,其中最主要的就是自定义itemEditor、itemRender怎么写,写篇东西整理总结下。
先看看下面这段代码:
查看源代码打印帮助01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
03.
<mx:Script>
04.
<![CDATA[
05.
import mx.collections.ArrayCollection;
06.
import mx.controls.DataGrid;
07.
import mx.events.ListEvent;
08.
[Bindable]
09.
private var dgDataArr:Array = [{name: "Jon", job: "officer"},
10.
{name: "James", job: "seller"},
11.
{name: "Jodon", job: "manager"}];
12.
13.
private function itemClickHandler(e:ListEvent):void
14.
{
15.
trace(e.target);
16.
}
17.
18.
]]>
19.
</mx:Script>
20.
<mx:Component id="comboboxEditor">
21.
<mx:ComboBox dataProvider="{dt}" editable="true">
22.
<mx:Script>
23.
<![CDATA[
24.
private var dt:Array = ["officer", "seller", "manager"];
25.
]]>
26.
</mx:Script>
27.
</mx:ComboBox>
28.
</mx:Component>
29.
<mx:DataGrid width="100%" x="10" y="20" fontSize="14" dataProvider="{dgDataArr}" editable="true" itemClick="itemClickHandler(event)">
30.
<mx:columns>
31.
<mx:DataGridColumn dataField="name" editable="false" />
32.
<mx:DataGridColumn dataField="job" itemEditor="{comboboxEditor}">
33.
</mx:DataGridColumn>
34.
</mx:columns>
35.
</mx:DataGrid>
36.</mx:Application>
代码实现的是创建一个DataGrid,其中job栏可以编辑,并且编辑器是自定义的一个ComboBox。效果如下:
现在看怎么用AS代替MXML创建同样的DataGrid。
1.先实现这一句:
查看源代码打印帮助1.<mx:DataGrid x="10" y="20" editable="true" width="100%" fontSize="14" dataProvider="{dgDataArr}" itemClick="itemClickHandler(event)"></mx:DataGrid>
写成AS大概是这样:
查看源代码打印帮助01.private function init():void
02.{
03.
var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
04.
var dataGrid:DataGrid = new DataGrid();
05.
dataGrid.x = 10;
06.
dataGrid.y = 20;
07.
dataGrid.editable = true;
08.
dataGrid.percentWidth = 100;
09.
dataGrid.setStyle("fontSize", 14);
10.
dataGrid.dataProvider = dgDataArr;
11.
dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
12.
addChild(dataGrid);
13.}
可以看到,在MXML里统一使用XX=”"的形式,但写成AS却各有不同。我没看过书,刚开始也迷惑,怎么就不能dataGrid.fontSize = 14这样写呢。
看下文档,才知道,每个MXML组件后面的属性分三种:
1.Properties 正常属性,如x y width等,写成AS是 dataGrid.x = 10
2.Styles 样式属性,如fontSize backgroundColor等,需要通过setStyle()设置,如dataGrid.setStyle(“fontSize”, 14);,也可以通过设置其styleName属性绑定到页面的一个css里。如:
查看源代码打印帮助1.dataGrid.styleName = "datagrid";查看源代码打印帮助1.<mx:Style>
2.
.datagrid{
3.
fontSize:14;
4.
}
5.</mx:Style>
3.Events 事件属性,AS要使用事件侦听,itemClick=”itemClickHandler(event)”对应的是如dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);。具体哪个属性对应哪个事件,就要查文档了。
其中width有点特殊,如果想设置百分比的宽度,不能用 dataGrid.width = “100%”,需要设置percentWidth,实际上在MXML设置width时如果有百分号,数值会传给percentWidth而不是width
还有一个属性比较特殊,就是dataProvider,它是一个实现ICollectionView接口的东西。如果传入的是Array,会自动转成ArrayCollection,如果是XMLList会转成XMLListCollection。这里直接传入一个ArrayCollection,是为了之后使用不同过滤函数时不用调用dataGrid.dataProvider而直接用dgData,如dgData.filterFunction = myFilterFunction
2.接下来添加列:
查看源代码打印帮助1.var columns:Array = new Array();
2.var col:DataGridColumn;
3.for ( var i:* in dgDataArr[0] ) {
4.
col = new DataGridColumn(i);
5.
if ( i == "name" ) col.editable = false;
6.
columns.push(col);
7.}
8.dataGrid.columns = columns;
这里只有两栏属性,用for in有点浪费了,这里只是示例。一般用AS写DataGrid都是动态生成的,数据也不确定,都用遍历添加栏。
3.最后就是使用ComboBox编辑。
传给itemRender和itemEditor都必须是一个实现IFactory接口的东西,IFactory接口很简单,只有一个newInstance()函数,DataGrid在渲染每一栏和每一栏的编辑器时都调用这个函数,返回一个新的渲染器。DataGrid默认的渲染器是DataGridItemRenderer,编辑的渲染器是TextInput。用下面的语句就可以把某一栏的编辑器设定为ComboBox:
查看源代码打印帮助1.var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);
2.col.itemEditor = comboboxFactory;
ClassFactory是实现了IFactory接口的类,上面这样设定后,每次col这一栏编辑的时候就会调用comboboxFactory.newInstance()生成一个ComboBox实例。
如果就只是上面那样设置,结果就是编辑时跳出来的ComboBox没有值,也不允许编辑,怎样传值进去呢?
ClassFactory有个properties属性可以让你传值给每一个ComboBox:
查看源代码打印帮助1.comboboxFactory.properties = { dataProvider: ["officer", "seller", "manager"], editable: true };
编辑后,DataGrid会默认把编辑器的text属性值保存到dataProvider里,并传送到itemRender。如果这里的编辑器没有text属性,例如NumericStepper,就需要给栏目设定editorDataField属性,指定编辑后该去哪里取修改过的值。例如:col.editorDataField = “value”
如果想要有更大的自由度,也可以自己写一个实现IFactory接口的类,在newInstance()里返回一个实例就行了:
查看源代码打印帮助01.package
02.{
03.
import mx.controls.ComboBox;
04.
import mx.core.IFactory;
05.
public class CustomComboBox implements IFactory
06.
{
07.
private var customData:Array = ["officer", "seller", "manager"];
08.
public function CustomComboBox() { }
09.
public function newInstance():*
10.
{
11.
var combobox:ComboBox = new ComboBox();
12.
combobox.dataProvider = customData;
13.
combobox.editable = true;
14.
combobox.setStyle("fontWeight", "normal");
15.
return combobox;
16.
}
17.
}
18.}
然后给itemEditor一个实例:col.itemEditor = new CustomComboBox();
这样,文章开头的那个MXML写的DataGrid就全由AS生成了。完整代码:
查看源代码打印帮助01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
03.
<mx:Script>
04.
<![CDATA[
05.
import mx.controls.dataGridClasses.DataGridColumn;
06.
import mx.collections.ArrayCollection;
07.
import mx.controls.DataGrid;
08.
import mx.events.ListEvent;
09.
import mx.controls.ComboBox;
10.
[Bindable]
11.
private var dgDataArr:Array = [{name: "Jon", job: "officer"},
12.
{name: "James", job: "seller"},
13.
{name: "Jodon", job: "manager"}];
14.
15.
private function init():void
16.
{
17.
var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
18.
dgData.filterFunction
19.
var dataGrid:DataGrid = new DataGrid();
20.
dataGrid.x = 10;
21.
dataGrid.y = 20;
22.
dataGrid.editable = true;
23.
dataGrid.percentWidth = 100;
24.
dataGrid.setStyle("fontSize", 14);
25.
dataGrid.styleName
26.
dataGrid.dataProvider = dgData;
27.
dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
28.
addChild(dataGrid);
29.
30.
var columns:Array = new Array();
31.
var col:DataGridColumn;
32.
for ( var i:* in dgDataArr[0] ) {
33.
col = new DataGridColumn(i);
34.
if ( i == "name" ) col.editable = false;
35.
if ( i == "job" ) {
36.
var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);
37.
comboboxFactory.properties = { dataProvider: ["officer", "seller", "manager"], editable: true };
38.
col.itemEditor = comboboxFactory;
39.
}
40.
columns.push(col);
41.
}
42.
dataGrid.columns = columns;
43.
44.
}
45.
private function itemClickHandler(e:ListEvent):void
46.
{
47.
trace(e.target);
48.
}
49.
50.
]]>
51.
</mx:Script>
52.</mx:Application>
2010年2月6日 17:48 查看评论(2) 分类:技术文章 Tags:as3 flex
初学FLEX时,需要在AS里动态生成DataGrid,结果搞了很久才搞明白怎么把用MXML写出来的DataGrid改成用AS写出来,其中最主要的就是自定义itemEditor、itemRender怎么写,写篇东西整理总结下。
先看看下面这段代码:
查看源代码打印帮助01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
03.
<mx:Script>
04.
<![CDATA[
05.
import mx.collections.ArrayCollection;
06.
import mx.controls.DataGrid;
07.
import mx.events.ListEvent;
08.
[Bindable]
09.
private var dgDataArr:Array = [{name: "Jon", job: "officer"},
10.
{name: "James", job: "seller"},
11.
{name: "Jodon", job: "manager"}];
12.
13.
private function itemClickHandler(e:ListEvent):void
14.
{
15.
trace(e.target);
16.
}
17.
18.
]]>
19.
</mx:Script>
20.
<mx:Component id="comboboxEditor">
21.
<mx:ComboBox dataProvider="{dt}" editable="true">
22.
<mx:Script>
23.
<![CDATA[
24.
private var dt:Array = ["officer", "seller", "manager"];
25.
]]>
26.
</mx:Script>
27.
</mx:ComboBox>
28.
</mx:Component>
29.
<mx:DataGrid width="100%" x="10" y="20" fontSize="14" dataProvider="{dgDataArr}" editable="true" itemClick="itemClickHandler(event)">
30.
<mx:columns>
31.
<mx:DataGridColumn dataField="name" editable="false" />
32.
<mx:DataGridColumn dataField="job" itemEditor="{comboboxEditor}">
33.
</mx:DataGridColumn>
34.
</mx:columns>
35.
</mx:DataGrid>
36.</mx:Application>
代码实现的是创建一个DataGrid,其中job栏可以编辑,并且编辑器是自定义的一个ComboBox。效果如下:
现在看怎么用AS代替MXML创建同样的DataGrid。
1.先实现这一句:
查看源代码打印帮助1.<mx:DataGrid x="10" y="20" editable="true" width="100%" fontSize="14" dataProvider="{dgDataArr}" itemClick="itemClickHandler(event)"></mx:DataGrid>
写成AS大概是这样:
查看源代码打印帮助01.private function init():void
02.{
03.
var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
04.
var dataGrid:DataGrid = new DataGrid();
05.
dataGrid.x = 10;
06.
dataGrid.y = 20;
07.
dataGrid.editable = true;
08.
dataGrid.percentWidth = 100;
09.
dataGrid.setStyle("fontSize", 14);
10.
dataGrid.dataProvider = dgDataArr;
11.
dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
12.
addChild(dataGrid);
13.}
可以看到,在MXML里统一使用XX=”"的形式,但写成AS却各有不同。我没看过书,刚开始也迷惑,怎么就不能dataGrid.fontSize = 14这样写呢。
看下文档,才知道,每个MXML组件后面的属性分三种:
1.Properties 正常属性,如x y width等,写成AS是 dataGrid.x = 10
2.Styles 样式属性,如fontSize backgroundColor等,需要通过setStyle()设置,如dataGrid.setStyle(“fontSize”, 14);,也可以通过设置其styleName属性绑定到页面的一个css里。如:
查看源代码打印帮助1.dataGrid.styleName = "datagrid";查看源代码打印帮助1.<mx:Style>
2.
.datagrid{
3.
fontSize:14;
4.
}
5.</mx:Style>
3.Events 事件属性,AS要使用事件侦听,itemClick=”itemClickHandler(event)”对应的是如dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);。具体哪个属性对应哪个事件,就要查文档了。
其中width有点特殊,如果想设置百分比的宽度,不能用 dataGrid.width = “100%”,需要设置percentWidth,实际上在MXML设置width时如果有百分号,数值会传给percentWidth而不是width
还有一个属性比较特殊,就是dataProvider,它是一个实现ICollectionView接口的东西。如果传入的是Array,会自动转成ArrayCollection,如果是XMLList会转成XMLListCollection。这里直接传入一个ArrayCollection,是为了之后使用不同过滤函数时不用调用dataGrid.dataProvider而直接用dgData,如dgData.filterFunction = myFilterFunction
2.接下来添加列:
查看源代码打印帮助1.var columns:Array = new Array();
2.var col:DataGridColumn;
3.for ( var i:* in dgDataArr[0] ) {
4.
col = new DataGridColumn(i);
5.
if ( i == "name" ) col.editable = false;
6.
columns.push(col);
7.}
8.dataGrid.columns = columns;
这里只有两栏属性,用for in有点浪费了,这里只是示例。一般用AS写DataGrid都是动态生成的,数据也不确定,都用遍历添加栏。
3.最后就是使用ComboBox编辑。
传给itemRender和itemEditor都必须是一个实现IFactory接口的东西,IFactory接口很简单,只有一个newInstance()函数,DataGrid在渲染每一栏和每一栏的编辑器时都调用这个函数,返回一个新的渲染器。DataGrid默认的渲染器是DataGridItemRenderer,编辑的渲染器是TextInput。用下面的语句就可以把某一栏的编辑器设定为ComboBox:
查看源代码打印帮助1.var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);
2.col.itemEditor = comboboxFactory;
ClassFactory是实现了IFactory接口的类,上面这样设定后,每次col这一栏编辑的时候就会调用comboboxFactory.newInstance()生成一个ComboBox实例。
如果就只是上面那样设置,结果就是编辑时跳出来的ComboBox没有值,也不允许编辑,怎样传值进去呢?
ClassFactory有个properties属性可以让你传值给每一个ComboBox:
查看源代码打印帮助1.comboboxFactory.properties = { dataProvider: ["officer", "seller", "manager"], editable: true };
编辑后,DataGrid会默认把编辑器的text属性值保存到dataProvider里,并传送到itemRender。如果这里的编辑器没有text属性,例如NumericStepper,就需要给栏目设定editorDataField属性,指定编辑后该去哪里取修改过的值。例如:col.editorDataField = “value”
如果想要有更大的自由度,也可以自己写一个实现IFactory接口的类,在newInstance()里返回一个实例就行了:
查看源代码打印帮助01.package
02.{
03.
import mx.controls.ComboBox;
04.
import mx.core.IFactory;
05.
public class CustomComboBox implements IFactory
06.
{
07.
private var customData:Array = ["officer", "seller", "manager"];
08.
public function CustomComboBox() { }
09.
public function newInstance():*
10.
{
11.
var combobox:ComboBox = new ComboBox();
12.
combobox.dataProvider = customData;
13.
combobox.editable = true;
14.
combobox.setStyle("fontWeight", "normal");
15.
return combobox;
16.
}
17.
}
18.}
然后给itemEditor一个实例:col.itemEditor = new CustomComboBox();
这样,文章开头的那个MXML写的DataGrid就全由AS生成了。完整代码:
查看源代码打印帮助01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
03.
<mx:Script>
04.
<![CDATA[
05.
import mx.controls.dataGridClasses.DataGridColumn;
06.
import mx.collections.ArrayCollection;
07.
import mx.controls.DataGrid;
08.
import mx.events.ListEvent;
09.
import mx.controls.ComboBox;
10.
[Bindable]
11.
private var dgDataArr:Array = [{name: "Jon", job: "officer"},
12.
{name: "James", job: "seller"},
13.
{name: "Jodon", job: "manager"}];
14.
15.
private function init():void
16.
{
17.
var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
18.
dgData.filterFunction
19.
var dataGrid:DataGrid = new DataGrid();
20.
dataGrid.x = 10;
21.
dataGrid.y = 20;
22.
dataGrid.editable = true;
23.
dataGrid.percentWidth = 100;
24.
dataGrid.setStyle("fontSize", 14);
25.
dataGrid.styleName
26.
dataGrid.dataProvider = dgData;
27.
dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
28.
addChild(dataGrid);
29.
30.
var columns:Array = new Array();
31.
var col:DataGridColumn;
32.
for ( var i:* in dgDataArr[0] ) {
33.
col = new DataGridColumn(i);
34.
if ( i == "name" ) col.editable = false;
35.
if ( i == "job" ) {
36.
var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);
37.
comboboxFactory.properties = { dataProvider: ["officer", "seller", "manager"], editable: true };
38.
col.itemEditor = comboboxFactory;
39.
}
40.
columns.push(col);
41.
}
42.
dataGrid.columns = columns;
43.
44.
}
45.
private function itemClickHandler(e:ListEvent):void
46.
{
47.
trace(e.target);
48.
}
49.
50.
]]>
51.
</mx:Script>
52.</mx:Application>
发表评论
-
flex 自定义多个命名空间以及标签名
2013-01-22 15:21 1271flex 自定义多个命名空 ... -
flex与flash之间相互调用
2012-12-12 12:39 612http://www.cnblogs.com/kaixuan/ ... -
Flex与Flex创建的swf通信
2012-12-12 10:16 707加载子SWF的Flex程序代码 <?xml vers ... -
[AS3]加载视频(FLV)文件
2012-12-06 15:11 848[AS3]加载视频(FLV)文件 分类: FLEX/CS3-- ... -
通过FileReference打开本地图片崩溃的解决方法
2012-12-06 14:02 705通过FileReference打开本地图片崩溃的解决方法 最近 ... -
使用FileReference的load()方法加载本地图片
2012-12-06 13:56 9001、要想使用FileReference的load()方法和da ... -
[AS3]Bitmap序列化(将BitmapData保存为原生Binary/ByteArray)
2012-12-06 13:48 749[AS3]Bitmap序列化(将BitmapData保存为原生 ... -
as3 画五角星算法
2012-12-05 16:49 2598as3 画五角星算法 阅读:10次 时间:2012-03- ... -
flex嵌入完整html
2012-11-29 11:18 802有时候我们需要在Flex应用中嵌入HTML代码,根据嵌入HTM ... -
flex4 textArea的htmlText属性
2012-11-29 11:13 3099它现在包含Text布局框架(Text Layout Frame ... -
Tooltip应用
2012-11-29 11:11 705创建ToolTip: var errorToolTip:To ... -
数据绑定显示问题
2012-10-27 12:11 635数据绑定实时变化。 XMLListCollection 可以变 ... -
待解决问题
2012-09-18 23:48 6951.仪表盘 2.渐变填充的使用 3.发光效果的完美运用 能在一 ... -
as3加载外部图片的两种方式
2012-09-09 11:46 988package net.burchin.loading { ... -
公式as3
2012-09-06 18:13 0as3 1人收藏此文章, 我要收藏 发表于1年前(2011-0 ... -
Flex中多线程的实现
2012-09-06 10:49 3470破阵子_如是我闻 如是我闻。一时佛在舍卫国,祗树给孤独园.. ... -
自定义column renderer
2012-08-09 15:07 903<?xml version="1.0" ... -
drowshadowFilter
2012-08-09 15:05 650DropShadowFilter 类,在Flash中为各种对象 ... -
123123
2012-08-08 17:16 0http://www.oschina.net/code/sni ... -
flex 画面快照截图与显示
2012-08-08 11:32 1037一、对指定画面进行快 ...
相关推荐
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
很好用的动态创建DataGrid并加入图片的方式。 只需要继承和实现一个接口就可以了。
Flex中如何创建自定义排序DataGrid控件的例子
在FLEX4中开发带有过滤功能的DATAGRID组件
flex动态生成datagrid表头,外加linechart的简单操作,值得学习!
flex 三状态多选 自动分页DataGrid
flex中dataGrid导出数据到excel中,不存在乱码问题
flex as3.0写的关于DataGrid的分页功能,拿出来分享一下!
Flex的DataGrid中使用CheckBox. 大家共同研究
Flex创建可编辑以及分页的DataGrid,对熟悉和使用datagrid控件是一个很好的例子。
Flex使用弹出窗口(titlewindos)为DataGrid添加新数据
flex 通过读取xml文件 实现动态DataGrid数据列表
Flex 动态给DataGrid增加行,可编辑行数据
flex带复选框的datagrid
其中包含一个三种状态的checkbox,DataGrid代码中引用了 带多选框的DataGrid(AdvancedDataGrid) 表头有全选CheckBox,三种状态:全选、部分选择、无选择 如果改变目录结构,需要在CustomCheckBox.mxml中更改inner....
将flex中datagrid组件中数据导出到excel表格中。思路很简单,利用as将datagrid中的数据解析出来,传到后台java服务端处理,即可保存为excel文件。
Flex中导出当前DataGrid中的数据。生成一个Excel文件。资源为一个简单的应用。
Flex Builder4.5导入Excel和CSV文件到DataGrid中,并自定义DataGrid选中行的右键
flex中的datagrid的分页定位以及高亮显示
FLEX的一个DataGrid例子,熟悉一下DataGrid的使用