flex4.5的DataGrid

DataGrid主要完成了两个目标

(1)确保简单的自定义视觉显示通过丰富的Spark剥离原则

(2)提高了渲染，滚动，交互性能。 datagrid新属性：

概念：

cell：单元格

 column heading，column header： column heading是显示在column最上面的title，column header是所有的column title

data item：grid的数据园中的一个元素。

grid：额、许多的二维表格的cells。就像一个简单的电子表格 或者html表格

indicator：一个可见元素，就是一个grid的cell或者row的亮点

IPE:ItemPendingError.，一些支持远程集合的数据源抛出的异常，当要求的数据item还不可利用的时候

item render：可见元素去渲染自定义的gird cell，仍然是一个工厂类

row，column：

separator：分割row与column的可见元素

smmoth scrolling：

 

一个例子：

  <fx:Script>
        import mx.collections.IList;

        [Bindable] public var gridData:IList = new ArrayList([
            {firstName: "Fred", lastName: "Flintsone", food: "hamburger", drink: "beer"},
    // ... more similar objects
        ]);
    </fx:Script>

    <s:DataGrid id="dataGrid" dataProvider="{gridData}" width="100%" height="100%">
        <s:columns>
            <s:ArrayList>
<s:GridColumn dataField="firstName"/>
<s:GridColumn dataField="lastName"/>
<s:GridColumn dataField="food"/>
<s:GridColumn dataField="drink"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
一个自定义itemrender例子

<s:GridColumn>
    <s:itemRenderer>
<fx:Component>
    <s:GridItemRenderer>
<s:Label text="{rowIndex}"
                    left="10" right="5" paddingTop="10" paddingBottom="5"/>
    </s:GridItemRenderer>
</fx:Component>
    </s:itemRenderer>
</s:GridColumn>

或者

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
        override public function prepare(hasBeenRecycled:Boolean):void
        {
            valueDisplay.selected = data[column.dataField] as Boolean;
        }
        ]]>
    </fx:Script>

    <s:CheckBox id="valueDisplay"/>
</s:GridItemRenderer>

 

另外一些皮肤属性

selectionIndicator - A visual element that's displayed for each selected row or cell (depends on the DataGrid selectionMode property).

caretIndicator - A single visual element that's displayed for the caret row or cell (depends on the DataGrid selectionMode property).

hoverIndicator - A single visual element that's displayed for the row or cell under the mouse (depends on the DataGrid selectionMode property).

rowSeparator - A visual element that's displayed in between each row.

columnSeparator - A visual element that's displayed in between each column.

rowBackground - A visual element that's displayed for each row. It's used to implement the alternatingRowColors style.

一个DataGrid的skin

<?xml version="1.0" encoding="utf-8"?>
<spark:DataGridSkin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:spark="spark.skins.spark.*">

    <fx:Declarations>
<fx:Component id="caretIndicator">
    <s:Rect>
<s:stroke>
    <s:SolidColorStroke color="0xFFBC7A" weight="2"/>
</s:stroke>
    </s:Rect>
</fx:Component>

<fx:Component id="selectionIndicator">
    <s:Rect>
<s:fill>
    <s:SolidColor color="0xC082FF"/>
</s:fill>
    </s:Rect>
</fx:Component>
    </fx:Declarations>

</spark:DataGridSkin>

 

更多参见http://opensource.adobe.com/wiki/display/flexsdk/Spark+DataGrid