7.3.访问设置自己渲染器的组件

2024-04-27 13:52:00

字体：大中小

来源：转载

供稿：网友

7.3.1. 问题
item renderer 需要访问它的父组件的一些数据。
7.3.2. 解决办法
实现IDropInListItemRenderer，通过drop-in renderer 访问它的父组件.
7.3.3. 讨论
实现了IDropInListItemRenderer 的renderer 不但能访问data 等一些传入的数据，还能通过BaseListData类型的一个属性访问renderer 的父组件（如List 或DataGridColumn）。

mx.controls.listClasses.BaseListData 有如下属性：
columnIndex : int
当前是第几列，当用户用mouse 点击List 或DataGrid 某个元素时这个属性被赋值。第一列是1。（注意，这个值的含意是指选中列是当前可见表格中的第几行，如果有横向的滚动条时要小心使用此属性）(原文中指出第一列是1，但事实是0)

owner : IUIComponent
这个drop-in itemRenderer 的所有者，即一个List 对象，或DataGridColumn 对象。(我认为原文这里是写错了，owner 不可能是DataGridColumn 对象，它只能是一个从ListBase扩展的类型，我想作者这里是想写DataGrid)

rowIndex : int
当前是第几行，类似columnIndex（这里要注意，这个属性对于Tree 有特殊含意，这个值是根据当前所有展开结点排列所得。）第一行是1。（原文中指出第一行是1，但事实是0）

uid : String
用于唯一标识一个renderer 对象。

如果itemRenderer 实现了IDropInListItemRenderer 接口，即itemRenderer 会有set listData 和get listData 两个方法，当这个itemRenderer 被使用时，它会被实例化并利用set listData 传数据给itemRenderer，这个数据就是我们在前边提到的，BaseListData类型的对象。在调用renderer 的set data 方法时我们可以根据listData 来得到拥有这个renderer 的容器，并通过一些判断来决定对data 的处理。在这个过程中，我们还可以调用自己的一些方法。下面我们通过例子说明listData 的用法。

-XML

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="50" implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.controls.List;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.BaseListData;
// store the list data item in case we want to do something with it
// later on
private var _listData:BaseListData;
[Bindable("dataChange")]
// a getter method.
public function get listData():BaseListData { return _listData; }
// a setter method,当BaseListData 数据被传入之后renderer 就可以通过它自己的一
//些属性访问拥有它的父组件中元素的数据，甚至可以调用父组件中的方法。
public function set listData(value:BaseListData):void {
_listData = value;
if (value.owner is DataGridColumn) {
trace("DataGridColumn");
} else if(value.owner is List) {
trace("List");
} else if
(value.owner is CustomDataGrid) {
trace("CustomDataGrid");
(value.owner as CustomDataGrid).checkInMethod(this);
}
}
override public function set data(value:Object):void {
nameTxt.text = value.name;
appearanceTxt.text = value.appearance;
}

]]>
</mx:Script>
<mx:Canvas backgroundColor="#3344ff">
<mx:Label id="nameTxt"/>
</mx:Canvas>
<mx:Label id="appearanceTxt"/>
</mx:VBox>