代码之家 › 专栏 › 技术社区 › Eric Belair

我如何知道Flex DataGrid itemRenderer中的按钮何时被单击?

itemrenderer button datagrid actionscript-3 flex

Eric Belair · 技术社区 · 17 年前

我有一个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中的数据无关。

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

2 回复 | 直到 17 年前

Joel Hooks 17 年前

您需要使itemRenderer成为一个类,然后从该类中引用DataGrid the methods described here . 然后,您可以从DataGrid发送事件,这在保存它的容器中很容易侦听。您不想做的是依赖冒泡或尝试直接聆听itemRenderer。您可能希望创建一个带有DataGrid行的data属性的自定义事件,以便事件侦听器可以快速访问此信息。

Eric Belair 17 年前

谢谢你,乔尔。这是我读了那篇文章(我以前读过)后提出的最终解决方案。我想将其按钮被单击的项目添加到另一个项目的属性数组中,因此我将“其他项目”作为属性传递到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);
        }
    }
}