我如何知道何时单击了 Flex DataGrid itemRenderer 中的按钮？答案

【问题标题】：How can I know when a Button in a Flex DataGrid itemRenderer is clicked?我如何知道何时单击了 Flex DataGrid itemRenderer 中的按钮？
【发布时间】：2010-11-09 02:27:24
【问题描述】：

我有一个显示几列数据的 DataGrid 组件。它有一个额外的列，显示一个按钮，允许用户对记录执行操作。

<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 中的数据无关的数据在父组件中执行操作。

在父组件中捕捉Button点击的最佳方法是什么，并知道它对应的记录是什么？

我应该完全使用自定义事件、itemEditor 还是其他东西？

【问题讨论】：

标签： apache-flex actionscript-3 datagrid button itemrenderer

【解决方案1】：

您需要将 itemRenderer 设为一个类，然后使用 the methods described here 从该类中引用您的 DataGrid。然后，您可以从 DataGrid 调度事件，这些事件很容易在包含它的容器中侦听。您不想做的是依赖冒泡或尝试直接收听 itemRenderer。您可能希望创建一个带有 DataGrid 行的数据属性的自定义事件，以便您的事件侦听器可以快速访问此信息。

【讨论】：

【解决方案2】：

谢谢乔尔。这是我在阅读那篇文章（我之前读过）后提出的最终解决方案。我想将单击其 Button 的项目添加到作为另一个项目的属性的数组中，因此我将“其他项目”作为属性传递给 DataGrid 组件，并在 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);
        }
    }
}

【讨论】：