最近研究一个 Flash 应用, 希望在 DataGrid 中加入图标. 查阅 Flash Help , 其中提到了 List.iconField 和 List.iconFunction , 但我只在 List 组件中试验成功, 虽然帮助中说 DataGrid 也继承了 List 的这两个属性(DataGrid 继承自 List), 但最终也没有实现.
于是问了一下 Google 大师, 找到了这个例子(下载), 是利用 List.cellRenderer 实现的, 通过研究实例, 偶还实现了
源码:
DataGrid.fla
/* * DataGrid 中图标和进度条的实现 * Dofy * 20070130 * dofyyu@gmail.com */ // 可编辑(为了方便看效果, 可以直接修改进度和状态值观察控件变化) 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"; } } }