FLEX如何动态创建DataGrid组件详解

初学FLEX时,需要在AS里动态生成DataGrid,结果搞了很久才搞明白怎么把用MXML写出来的DataGrid改成用AS写出来,其中最主要的就是自定义itemEditor、itemRender怎么写,写篇东西整理总结下。

先看看下面这段代码:

<? xml version = "1.0" encoding = "utf-8" ?>
< mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" >
    < mx:Script >
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.DataGrid;
            import mx.events.ListEvent;
            [Bindable]
            private var dgDataArr:Array = [{name: "Jon", job: "officer"},
                                      {name: "James", job: "seller"},
                                      {name: "Jodon", job: "manager"}];
            private function itemClickHandler(e:ListEvent):void
            {
                trace(e.target);
            }
        ]]>
    </ mx:Script >
    < mx:Component id = "comboboxEditor" >
        < mx:ComboBox dataProvider = "{dt}" editable = "true" >
            < mx:Script >
                <![CDATA[
                    private var dt:Array = ["officer", "seller", "manager"];
                ]]>
            </ mx:Script >
        </ mx:ComboBox >
    </ mx:Component >
    < mx:DataGrid width = "100%" x = "10" y = "20" fontSize = "14" dataProvider = "{dgDataArr}" editable = "true" itemClick = "itemClickHandler(event)" >
        < mx:columns >
            < mx:DataGridColumn dataField = "name" editable = "false" />
            < mx:DataGridColumn dataField = "job" itemEditor = "{comboboxEditor}" >
            </ mx:DataGridColumn >
        </ mx:columns >
    </ mx:DataGrid >
</ mx:Application >

代码实现的是创建一个DataGrid,其中job栏可以编辑,并且编辑器是自定义的一个ComboBox。效果如下:

现在看怎么用AS代替MXML创建同样的DataGrid。

1.先实现这一句:

< mx:DataGrid x = "10" y = "20" editable = "true" width = "100%" fontSize = "14" dataProvider = "{dgDataArr}" itemClick = "itemClickHandler(event)" ></ mx:DataGrid >

写成AS大概是这样:

private function init(): void
{
    var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
    var dataGrid:DataGrid = new DataGrid();
    dataGrid.x = 10 ;
    dataGrid.y = 20 ;
    dataGrid.editable = true ;
    dataGrid.percentWidth = 100 ;
    dataGrid.setStyle( "fontSize" , 14 );
    dataGrid.dataProvider = dgDataArr;
    dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
    addChild(dataGrid);
}

可以看到,在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里。如:

dataGrid.styleName = "datagrid" ;
< mx:Style >
    .datagrid{
    fontSize:14;
    }
</ 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.接下来添加列:

var columns: Array = new Array ();
var col:DataGridColumn;
for ( var i:* in dgDataArr[ 0 ] ) {
    col = new DataGridColumn(i);
    if ( i == "name" ) col.editable = false ;
    columns.push(col);
}
dataGrid.columns = columns;

这里只有两栏属性,用for in有点浪费了,这里只是示例。一般用AS写DataGrid都是动态生成的,数据也不确定,都用遍历添加栏。

3.最后就是使用ComboBox编辑。

传给itemRender和itemEditor都必须是一个实现IFactory接口的东西,IFactory接口很简单,只有一个newInstance()函数,DataGrid在渲染每一栏和每一栏的编辑器时都调用这个函数,返回一个新的渲染器。DataGrid默认的渲染器是DataGridItemRenderer,编辑的渲染器是TextInput。用下面的语句就可以把某一栏的编辑器设定为ComboBox:

var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);
col.itemEditor = comboboxFactory;

ClassFactory是实现了IFactory接口的类,上面这样设定后,每次col这一栏编辑的时候就会调用comboboxFactory.newInstance()生成一个ComboBox实例。
如果就只是上面那样设置,结果就是编辑时跳出来的ComboBox没有值,也不允许编辑,怎样传值进去呢?
ClassFactory有个properties属性可以让你传值给每一个ComboBox:

comboboxFactory.properties = { dataProvider: [ "officer" , "seller" , "manager" ], editable: true };

编辑后,DataGrid会默认把编辑器的text属性值保存到dataProvider里,并传送到itemRender。如果这里的编辑器没有text属性,例如NumericStepper,就需要给栏目设定editorDataField属性,指定编辑后该去哪里取修改过的值。例如:col.editorDataField = “value”

如果想要有更大的自由度,也可以自己写一个实现IFactory接口的类,在newInstance()里返回一个实例就行了:

package
{
    import mx.controls.ComboBox;
    import mx.core.IFactory;
    public class CustomComboBox implements IFactory
    {
        private var customData: Array = [ "officer" , "seller" , "manager" ];
        public function CustomComboBox() { }
        public function newInstance():*
        {
            var combobox:ComboBox = new ComboBox();
            combobox.dataProvider = customData;
            combobox.editable = true ;
            combobox.setStyle( "fontWeight" , "normal" );
            return combobox;
        }
    }
}

然后给itemEditor一个实例:col.itemEditor = new CustomComboBox();

这样,文章开头的那个MXML写的DataGrid就全由AS生成了。完整代码:

<? xml version = "1.0" encoding = "utf-8" ?>
< mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" initialize = "init()" >
    < mx:Script >
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import mx.collections.ArrayCollection;
            import mx.controls.DataGrid;
            import mx.events.ListEvent;
            import mx.controls.ComboBox;
            [Bindable]
            private var dgDataArr:Array = [{name: "Jon", job: "officer"},
                                      {name: "James", job: "seller"},
                                      {name: "Jodon", job: "manager"}];
            private function init():void
            {
                var dgData:ArrayCollection = new ArrayCollection(dgDataArr);
                dgData.filterFunction
                var dataGrid:DataGrid = new DataGrid();
                dataGrid.x = 10;
                dataGrid.y = 20;
                dataGrid.editable = true;
                dataGrid.percentWidth = 100;
                dataGrid.setStyle("fontSize", 14);
                dataGrid.styleName
                dataGrid.dataProvider = dgData;
                dataGrid.addEventListener(ListEvent.ITEM_CLICK, itemClickHandler);
                addChild(dataGrid);
                var columns:Array = new Array();
                var col:DataGridColumn;
                for ( var i:* in dgDataArr[0] ) {
                    col = new DataGridColumn(i);
                    if ( i == "name" ) col.editable = false;
                    if ( i == "job" ) {
                        var comboboxFactory:ClassFactory = new ClassFactory(ComboBox);
                        comboboxFactory.properties = { dataProvider: ["officer", "seller", "manager"], editable: true };
                        col.itemEditor = comboboxFactory;
                    }
                    columns.push(col);
                }
                dataGrid.columns = columns;
            }
            private function itemClickHandler(e:ListEvent):void
            {
                trace(e.target);
            }
        ]]>
    </ mx:Script >
</ mx:Application >

 

你可能感兴趣的:(FLEX如何动态创建DataGrid组件详解)