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

flex4.5的DataGrid相关推荐

flex 3与flex 4的不同
Flex4.5中DataGrid组件的使用有关Flex的DataGrid文章的确不少,都是零零碎碎的,目前还没有发现有个完整的例子供网友参考,这次我花了两天时间做了下Flex关于DataGrid一个 ...
flex4 s:Datagrid s:typicalItem
<s:DataGird <s:typicalItem 这个标签相信大家很陌生吧, 我也是今天准备讲的时候才看到,估计是 flex4.5.1 新加东西,果然摸索了下,这个标签作用也蛮好用的 ...
微软Silverlight4与Adobe Flex4打成平手，SL与FLEX技术全面对比
以前是国外给出的Silverlight与Flash全面对比: Tecnologias Adobe Flex 4 Microsoft Silverlight 4 Runtime - Flash Play ...
Flex通过Java读取Excel(详细流程)----Excel在客户端（DataGrid动态根据Excel生成）
2011-03-06 23:57:00| 分类: flex/flash | 标签:excel flex java 客户端 as3xls |字号大中小订阅在网上查了很久的资料,就是 ...
flex4.5新特征
1,支持移动开发 2,更多spark ui,比如image,datagrid,form flex4.5中spark组件主要有,Datagrid,Form,Image,Module,Busy Indic ...
Useing flex4 读书笔记
chapter 1 : intruduction to flex4 1.flex包含一个基于组件的开发模型,你只需要按需求继承现有的组件并扩展相关的方法就可开发你的应用. 2.可视化组件包括以下主要特 ...
Flex4/Flash开发在线音乐播放器 , 含演示地址
要求必备知识本文要求基本了解 Adobe Flex编程知识和JAVA基础知识. 开发环境 MyEclipse10/Flash Builder4.6/Flash Player11及以上演示地址演 ...
Flex4 css中skin设置报错解决
Flex4 css中skin设置 header-background-skin:"MySkin"; 运行时报错: TypeError: Error #1034: 强制转换类型失败: ...
DataGrid和GridView单击背景变色双击颜色还原
DataGrid中首先我们假设.aspx文件中DataGrid的数据行的样式为 <AlternatingItemStyle BackColor="White" ForeCo ...

flex4.5的DataGrid

flex4.5的DataGrid相关推荐

最新文章

热门文章