正在加载菜单，请稍待......

使用itemRenderer给DataGrid添加复选框-DataGrid系列示例

类别：flex实例

标签：

浏览：383次

明河共影发布于 2009年11月6日

RIA之家技术群：24440797。你可以通过以下方式联络到明河： 1、进入我的微博首页跟随我 2、我的email：riahome@126.com

先来看演示：

当用户点击DataGrid内的复选框时。在DataGrid下面出现单条记录的信息。

由于此示例需要包含自定义子组件和自定义事件，所以提供源代码下载而不再贴出全部代码。

关键知识点说明：

  1. itemRenderer的用法，itemRenderer是flex的DataGrid强大的精髓，正是由于此属性的存在，才有可能随心所欲的控制DataGrid的数据
  2. 创建自定义事件，并予以派发

先来看复选框子组件(view文件夹下)

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="40" height="24">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import event.DataGridEvent;
  6.             private function select():void{
  7.                 this.parentApplication.dispatchEvent(new DataGridEvent(data,check.selected));
  8.             }
  9.         ]]>
  10.     </mx:Script>
  11.     <mx:CheckBox id="check" x="0" y="0" change="select()"  />
  12. </mx:Canvas>

CheckBox定义个change事件，在复选框的值被改变的时候，向父容器（DataGrid）派发自定义事件。

先来看自定义事件(event文件夹下)

  1. package event
  2. {
  3.     import flash.events.Event;
  4.     public class DataGridEvent extends Event
  5.     {
  6.         public var isSelect:Boolean;
  7.         public var o:Object;
  8.         public function DataGridEvent(_o:Object,_isSelect:Boolean):void
  9.         {
  10.             o = _o;
  11.             isSelect = _isSelect;
  12.             super("selectRow");
  13.         }
  14.  
  15.     }
  16. }

自定义事件必须继承于Event。此事件接受二个参数，_o为该行数据，_isSelect复选框的值。
指的一提的是super(“selectRow”);这句非常关键。此句的意思是调用父类的构造函数，并将事件类型传递出去。

先来看主程序：

  1. <mx:DataGridColumn headerText="选择" itemRenderer="view.CheckBox" width="40" />

调用子组件

  1. addEventListener("selectRow",selectHandler);
  1. private function selectHandler(evt:event.DataGridEvent):void{
  2.                  if(evt.isSelect){
  3.                      title_label.text = "标题："+evt.o.title;
  4.                      link_label.text = "链接："+evt.o.link;
  5.                      pubDate_label.text = "发表日期："+evt.o.pubDate;
  6.                  }else{
  7.                      title_label.text = "";
  8.                      link_label.text = "";
  9.                      pubDate_label.text = "";                    
  10.                  }
  11.              }

监听自定义事件。

订阅RIA之家，及时获取RIA之家最新文章：

本文链接：http://www.36ria.com/675

除非特别说明，本站的所有内容均为原创或翻译，所有权属于文章作者，欢迎转载，转载请注明出处，谢谢。

  • 相关文章
  • 最新文章
  • 最热文章
  • 随机文章