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

Posted 2023-02-22

【中文标题】我如何知道何时单击了 Flex DataGrid itemRenderer 中的按钮？

【英文标题】：How can I know when a Button in a Flex DataGrid itemRenderer is clicked?

【发布时间】：2010-11-09 02:27:24

【问题描述】：

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

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

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

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

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

我需要在父组件中使用其他可用但与 DataGrid 中的数据无关的数据在父组件中执行操作。

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

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

【参考方案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" 
             />

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

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

        <mx:DataGridColumn headerText=""  
            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);