7.4.创建一个简单的组件作为渲染器和编辑器

2024-04-27 13:52:00

字体：大中小

来源：转载

供稿：网友

7.4.1. 问题
你需要建立一个即可以用于item editor 又可以用于item renderer 的组件,并且item editor 会收到一个数组,我们希望这个数组能以combo box 的形式显示出来。
7.4.2. 解决办法
建立一个己经实现了IDropInListItemRenderer 的组件，并在它里边定义两个states即状态，一个状态用于显示editor 另一个用于显示renderer。当data 发生变化时，即在editor 状态用户做了修改操作，系统将会派发一个ITEM_EDIT_END 事件到这个组件的父组件，父组件收到这个事件后，保存修改的数据到dataProvider 里。
7.4.3. 讨论
把一个item renderer 改装成一个item editor 很容易，在List 这个类里有一个rendererIsEditor 属性，如果这个属性为true,当itemRenderer 被双击时，便进入编辑状态，List 并没有建一个item editor 而是使用itemRenderer 监听并捕获了edit 的事件。

原文中提到DataGridColumn 也有rendererIsEditor 属性，这是对的，但原文中说DataGridColumn 是继承自List，我看了这两个类，它们之间并没有这层关系，它们各自定义了rendererIsEditor 属性。

当用户完成修改后即更新dataProvider,关健在于修改完成后renderer 要派发一个ITEM_EDIT_END 事件。在下边的例子中使用DataGridEvent 传递被修改单元格所在行数和列数，从而确定需要修改dataProvider 中哪些数据。DataGridEvent 对象是在setNewData方法中建立并派发的。setNewData 方法是在ComboBox 的值发生变化时被调用。

-ActionScript

private function setNewData():void {
_data.selected = selectCB.selectedItem;
dispatchEvent(new DataGridEvent(DataGridEvent.ITEM_EDIT_END,true, true, _listData.columnIndex,'selected', _listData.rowIndex));
}

在接下来的例子中，这组数据将要用于dataGrid 的显示，下面这组数据相当于在item renderer 里得到的data，它有几个基本属性：name、age、appearance，还有一个数组extras,还有一个selected 属性，用于标记xtras 数组中哪个元素被选中了，这些数据都是可以修改的。

-ActionScript

{name:"Todd Anderson", age:31, appearance:"Intimidating", extras:["bar", "foo","baz"], selected:"bar"}

象这样的数据是很常见的。extras 属性中的数据是专门用做ComboBox 数据源的，selected 是专门用于记录ComboBox 选中项的。但是一般情况下，DataGrid 的renderer 都只是传一个简单的数据。如果DataGridColumn 没有明确指定dataField 属性，整个data对象被传入renderer。正如下边的样子。(原文在这里的描述很容易让人误解,其实不管你有没有指定dataField 属性，都会把整个data 传给renderer。)

-XML

<mx:DataGrid dataProvider="{DataHolder.genericCollectionTwo}"
width="450" itemEditEnd="checkEditedItem(event)" id="dg">
<mx:columns>
<mx:DataGridColumn dataField="age"/>
<mx:DataGridColumn dataField="appearance"/>
<mx:DataGridColumn
itemRenderer="oreilly.cookbook.ComboBoxRenderer"
editable="true" rendererIsEditor="true"/>
</mx:columns>
</mx:DataGrid>