DataGrid 中加入图标

最近研究一个 Flash 应用, 希望在 DataGrid 中加入图标. 查阅 Flash Help , 其中提到了 List.iconField 和 List.iconFunction , 但我只在 List 组件中试验成功, 虽然帮助中说 DataGrid 也继承了 List 的这两个属性(DataGrid 继承自 List), 但最终也没有实现.

于是问了一下 Google 大师, 找到了这个例子(下载), 是利用 List.cellRenderer 实现的, 通过研究实例, 偶还实现了

 

源码:

DataGrid.fla

/*
* DataGrid 中图标和进度条的实现
* Dofy
* 20070130
* [e-mail]
*/
// 可编辑(为了方便看效果, 可以直接修改进度和状态值观察控件变化)
myGrid.editable = true;
// 表头
myGrid.addColumn("status");
myGrid.addColumn("title");
myGrid.addColumn("guage");
// 显示
myGrid.getColumnAt(0).headerText = "状态";
myGrid.getColumnAt(1).headerText = "标题";
myGrid.getColumnAt(2).headerText = "进度";
// 宽度
myGrid.getColumnAt(0).width = 70;
myGrid.getColumnAt(1).width = 180;
myGrid.getColumnAt(2).width = 100;
// cell renderer
/*
* 这里要特别说明一下
* 后面的 Icon 和 Guage 是库中的两个 MC
* 在 Renderer 文件夹中
* 这是两个 linkage name 分别是 Icon 和 Guage 的
* 分别继承自 IconCellRenderer 和 PerCellRenderer
* 这两个自定义类的空 MC
* 在库中相应的元件上单击右键, 查看 "链接..." 项可以看到相关内容
* ( 两个类的说明看 IconCellRenderer.as 文件 )
*/
myGrid.getColumnAt(0).cellRenderer = "Icon";
myGrid.getColumnAt(2).cellRenderer = "Guage";
// data
myGrid.addItem({status:"等待", title:"等待中的项目", guage:0});
myGrid.addItem({status:"失败", title:"失败的项目", guage:70});
myGrid.addItem({status:"完成", title:"完成的项目", guage:100});
myGrid.addItem({status:"我咧", title:"pulapula项目", guage:30});
// button
btn_change.onRelease = function() {
  myGrid.editField(0, "status", "完成");
  myGrid.editField(0, "guage", "100");
};

 

IconCellRenderer.as

// 引入类
import mx.core.UIComponent;
// 创建继承自 UIComponent 的类
class IconCellRenderer extends UIComponent {
  var Icon:MovieClip;
  function IconCellRenderer() {
    // nothing
  }
  private function createChildren(Void):Void {
    // 行被创建时触发
    trace("创建");
    Icon = createEmptyMovieClip("Icon", 1);
    Icon.createTextField("txt", 2, 20, 0, 50, 20);
    Icon.txt.selectable = false;
  }
  private function size(Void):Void {
    // 单元格大小被改变时触发
    trace("大小");
    //Icon.setSize(16, 16);
    Icon._x = 3;
    Icon._y = 2;
  }
  private function setValue(str:String, item:Object, sel:Boolean):Void {
    // 改变值时调用
    // str 是绑定该 CellRenderer 的单元的值
    // item 是整个行对象
    Icon._visible = (item != undefined);
    Icon.attachMovie(getIcon(item.status), "icon", 1);
    Icon.txt.text = str;
    size();
  }
  private function getIcon(str:String):String {
    // 这是一自定义函数
    switch (str) {
    case "等待" :
      return "icon_wait";
    case "完成" :
      return "icon_complete";
    case "失败" :
      return "icon_failed";
    default :
      return "icon_unknow";
    }
  }
}

 

评论

1 楼 GapStar 2012-02-02  

换成flash IconCellRenderer.as应该怎么写