如何知道何時單擊Flex DataGrid itemRenderer中的Button？

Question

我有一個顯示幾列數據的DataGrid組件。 它有一個附加列，顯示一個Button，允許用戶對記錄采取操作。

<mx:DataGrid dataProvider="{myData}">
    <mx:columns>
        <mx:DataGridColumn dataField="firstName" headerText="First Name" 
            width="75" />

        <mx:DataGridColumn dataField="LastName" headerText=" Last Name" 
            width="150" />

        <mx:DataGridColumn dataField="phone" headerText="Phone" 
            width="120" />

        <mx:DataGridColumn headerText="" width="110">
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Box horizontalAlign="center" width="100%">
                        <mx:Button label="Take Action" />
                    </mx:Box>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

我需要使用其中可用的其他數據在父組件中執行操作，但與DataGrid中的數據無關。

捕獲父組件中按鈕單擊的最佳方法是什么，並知道它對應的記錄是什么？

我應該完全使用自定義事件，itemEditor或其他東西嗎？

Answer 1

您需要將itemRenderer設為一個類，然后使用此處描述的方法從該類中引用您的DataGrid。 然后，您可以從DataGrid中調度事件，這些事件很容易在容納它的容器中偵聽。 你不想做的是依靠冒泡或嘗試直接聽itemRenderer。 您可能希望創建一個包含DataGrid行的data屬性的自定義事件，以便您的事件偵聽器可以快速訪問此信息。

Answer 2

謝謝喬爾。 這是我在閱讀那篇文章之后想出的最終解決方案（我之前已經讀過）。 我想將其Button被單擊的項添加到另一個項的屬性Array中，因此我將“other item”作為屬性傳遞給DataGrid Component，並在itemRenderer的函數調用中對其執行操作：

/* CustomDataGrid.mxml */
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            public var otherData:Object;

            public function takeAction(item:Object):void
            {
                otherData["children"][0] = item;
            }
        ]]>
    </mx:Script>

    <mx:columns>
        <mx:DataGridColumn dataField="firstName" headerText="First Name" 
            width="75" />

        <mx:DataGridColumn dataField="LastName" headerText=" Last Name" 
            width="150" />

        <mx:DataGridColumn dataField="phone" headerText="Phone" 
            width="120" />

        <mx:DataGridColumn headerText="" width="110" 
            itemRender="ActionButtonItemRenderer" />
    </mx:columns>
</mx:DataGrid>

/* ActionButtonItemRenderer.as */
package
{
    import flash.events.MouseEvent;

    import mx.controls.Button;

    public class ActionButtonItemRenderer extends Button
    {
        public function ActionButtonItemRenderer()
        {
            super();

            label = "Take Action";
        }

        override protected function clickHandler(event:MouseEvent):void
        {
            super.clickHandler(event);

            var owner:CustomDataGrid = listData.owner as CustomDataGrid;

            owner.takeAction(data);
        }
    }
}