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>