7.4.創(chuàng)建一個簡單的組件作為渲染器和編輯器

2024-04-27 13:52:00

字體：大中小

供稿：網(wǎng)友

7.4.1. 問題
你需要建立一個即可以用于item editor 又可以用于item renderer 的組件,并且item editor 會收到一個數(shù)組,我們希望這個數(shù)組能以combo box 的形式顯示出來。
7.4.2. 解決辦法
建立一個己經(jīng)實現(xiàn)了IDropInListItemRenderer 的組件，并在它里邊定義兩個states即狀態(tài)，一個狀態(tài)用于顯示editor 另一個用于顯示renderer。當data 發(fā)生變化時，即在editor 狀態(tài)用戶做了修改操作，系統(tǒng)將會派發(fā)一個ITEM_EDIT_END 事件到這個組件的父組件，父組件收到這個事件后，保存修改的數(shù)據(jù)到dataProvider 里。
7.4.3. 討論
把一個item renderer 改裝成一個item editor 很容易，在List 這個類里有一個rendererIsEditor 屬性，如果這個屬性為true,當itemRenderer 被雙擊時，便進入編輯狀態(tài)，List 并沒有建一個item editor 而是使用itemRenderer 監(jiān)聽并捕獲了edit 的事件。

原文中提到DataGridColumn 也有rendererIsEditor 屬性，這是對的，但原文中說DataGridColumn 是繼承自List，我看了這兩個類，它們之間并沒有這層關(guān)系，它們各自定義了rendererIsEditor 屬性。

當用戶完成修改后即更新dataProvider,關(guān)健在于修改完成后renderer 要派發(fā)一個ITEM_EDIT_END 事件。在下邊的例子中使用DataGridEvent 傳遞被修改單元格所在行數(shù)和列數(shù)，從而確定需要修改dataProvider 中哪些數(shù)據(jù)。DataGridEvent 對象是在setNewData方法中建立并派發(fā)的。setNewData 方法是在ComboBox 的值發(fā)生變化時被調(diào)用。

-ActionScript

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

在接下來的例子中，這組數(shù)據(jù)將要用于dataGrid 的顯示，下面這組數(shù)據(jù)相當于在item renderer 里得到的data，它有幾個基本屬性：name、age、appearance，還有一個數(shù)組extras,還有一個selected 屬性，用于標記xtras 數(shù)組中哪個元素被選中了，這些數(shù)據(jù)都是可以修改的。

-ActionScript

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

象這樣的數(shù)據(jù)是很常見的。extras 屬性中的數(shù)據(jù)是專門用做ComboBox 數(shù)據(jù)源的，selected 是專門用于記錄ComboBox 選中項的。但是一般情況下，DataGrid 的renderer 都只是傳一個簡單的數(shù)據(jù)。如果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>