Spark的DataGrid终于来了—Flex SDK Hero新功能

在Adobe新发布的Flex SDK预览版“HERO”中,终于看到了基于Spark的DataGrid和Form,终于可以结束在SDK4下面混合使用mx Form和Spark的TextInput的郁闷经历。
除此之外,Hero还带来了以下新功能:

  • Spark BitmapImage终于可以载入远程图像文件了(……肉牛满面),同时还提供“smoothingQuality”和“scaleMode”等新的功能;详情
  • Spark Image建立在BitmapImage的基础上,在载入图像失败的时候可以显示一个载入失败的图标;详情
  • Spark Formatters
  • OSMF升级到1.0版本
  • TLF升级到下一个版本,这个版本增强了文本性能,加入了有序列表等新功能
  • 增强编译器性能——减少内存占用、降低编译时间、改善RSL库编译逻辑等等(每次都这么说,但我怎么感觉越来越慢……)
  • RSL——“非常令人激动的改进”,例如没有使用过的库不会包含在RSL中(本来就应该这样),纯Spark或者纯MX项目将保证只会将使用的组件编译到RSL中(本来就应该这样,但我确实很激动)

更详细的官方说明,看这里:http://www.adobe.com/devnet/flex/articles/introducing_flexsdk_hero.html

在DataGrid中实现多条件筛选和搜索

其实,对DatatGrid进行筛选,本质是对DataGrid的dataProvider进行筛选。筛选功能通过ICollectionView接口的filterFunction属性实现。

通常,DataGrid的dataProvider会是一个ArrayCollection,而ArrayCollection实现了ICollectionView接口,因此可以直接使用filterFunction属性。

因此,要实现对一个ArrayCollection的筛选,只需要把一个自定义函数名指定给这个要被筛选的ArrayCollection的filterFunction属性,然后刷新ArrayCollection即可,例如:

cityAC.filterFunction = filterFunc;
cityAC.refresh();

在这里例子里面,我使用的数据是武汉市和宜昌市的下级行政区。可以使用三种条件进行筛选:

  1. 显示武汉市、宜昌市、或者全部的行政区
  2. 显示区、县或者县级市
  3. 根据名称或者名称的拼音进行筛选

所以,这个自定义函数就是筛选功能实现的核心: 继续阅读在DataGrid中实现多条件筛选和搜索

继承DataGrid时出现错误:Could not resolve to a component implementation.

2015-01-12更新: 由于 Dreamer 的网站已经不能访问了,我来提供 源码 下载。

Dreamer 那里看到为DataGrid加背景色的方法,于是在项目中实验了一下,结果在编译的时候出错,错误内容为:

Could not resolve <mx:columns> to a component implementation.

看来是 <columns> 标签不能使用了。怎么办?将 columns 的包名改为与继承类的包名相同即可,例如:

<av:ColoredDataGrid id="dg" 
    width="100%" height="100%" 
    dataProvider="{emceeList}" 
    variableRowHeight="true" 
    wordWrap="true" 
    toolTip="{intro}">
    <av:columns>
        <mx:DataGridColumn headerText="昵称" dataField="name"/>
        <mx:DataGridColumn headerText="状态" labelFunction="type" width="60"/>
    </av:columns>
</av:ColoredDataGrid> 

在Flex中建立DataGrid的方法

看了一下Flex builder 2的帮助文件,原来建立DataGrid的方法非常灵活,大致有下面几种:

1.最简单的方法

<mx:DataGrid>
    <mx:ArrayCollection>
        <mx:Object>
            <mx:姓名>zrong</mx:姓名>
            <mx:邮箱>zrongzrong@gmail.com</mx:邮箱>
            <mx:主页>www.zengrong.net</mx:主页>
        </mx:Object>
        <mx:Object>
            <mx:姓名>orphen</mx:姓名>
            <mx:邮箱>orphen123@gmail.com</mx:邮箱>
            <mx:主页>www.orphen123.net</mx:主页>
        </mx:Object>
    </mx:ArrayCollection>
</mx:DataGrid>

在ArrayCollection中定义Object标签来实现数据的添加。每个Object标签代表一行,而Object中的每个子标签代表一列。

同样的,也可以使用Object标签的属性来设置行和列,就像下面这样:
继续阅读在Flex中建立DataGrid的方法