Flex datagrid：为每行/列添加一个菜单控件

Question

我试图弄清楚这一点，但我无法做到。 我有一个 AdvancedDataGrid，每一行都有列。每个列元素可以包含文本/图像或任何自定义 UiComponent。

我想要的是用户能够点击一个列，然后我显示一个这样的自定义菜单 !(http://livedocs.adobe.com/flex/3/html/images/menu.png)

因此，当用户单击第 1 行第 1 列（例如员工姓名）时，菜单中的选项可能是： - 删除员工 - 显示员工报告

当用户点击第 1 行第 2 列（员工状态）时，选项可能是： - 删除员工 - 将员工设置为退休

我的问题是当我点击 UiComponent 或数据网格中的文本时，点击事件没有被触发。即使我设置了背景填充和 alpha。

谢谢

Answer 1

请在下面找到示例，您可以从中获得一些想法：- 在这里，我发布示例，您可以通过它来实现您正在寻找的东西。您可以使用以下逻辑使其更具自定义性。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:XML format="e4x" id="myMenuDataEmpName">
            <root>
                <menuitem label="Delete employee"  data="ShowAlertPopup"/>
                <menuitem label="Show employee reports"  data="ShowAlertPopup"/>
            </root>
        </fx:XML>

        <fx:XML format="e4x" id="myMenuDataEmpStatus">
            <root>
                <menuitem label="Delete employee" data="ShowAlertPopup"/>
                <menuitem label="Set employee to retired"  data="ShowAlertPopup"/>
            </root>
        </fx:XML>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;
            import mx.controls.Menu;
            import mx.events.FlexEvent;
            import mx.events.MenuEvent;

            [Bindable]
            private var dpHierarchy:ArrayCollection= new ArrayCollection([
                {name:"A", region: "Arizona"},
                {name:"B", region: "Arizona"},
                {name:"C", region: "California"},
                {name:"D", region: "California"}
            ]); 

            private function init():void
            {
                myADG.addEventListener(AGDRowCloumnMenuEvent.MENU_EVENT, menuHandler);
            }

            private function menuHandler(event:AGDRowCloumnMenuEvent):void
            {
                if(event.eventInfo == 'name')
                {
                    createAndShowEMP("Name")
                }
                else{
                    createAndShowEMP("Status")
                }
            } 

            private function createAndShowEMP(displayMenu:String):void {
                var myMenu:Menu;  
                    if(displayMenu == "Name")
                        myMenu = Menu.createMenu(null, myMenuDataEmpName, false);
                    else
                        myMenu = Menu.createMenu(null, myMenuDataEmpStatus, false);

                myMenu.labelField="@label";
                myMenu.addEventListener(MenuEvent.ITEM_CLICK, executeItemClickMenuHandler);
                myMenu.show(10, 10);
            }

            private function executeItemClickMenuHandler(menuEvent:MenuEvent):void {
                callLater(this[menuEvent.item.@data]);
            }

            private function ShowAlertPopup():void
            {
                Alert.show("Menu Item Clicked")
            }
        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG" x="50" y="50"
                         width="400" height="300" creationComplete="init()"
                         variableRowHeight="true" dataProvider="{dpHierarchy}">
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="name" headerText="Emp Name" itemRenderer="ADGRowColumnMenu"/>
            <mx:AdvancedDataGridColumn dataField="region" headerText="Emp Status" itemRenderer="ADGRowColumnMenu"/>
        </mx:columns>   

    </mx:AdvancedDataGrid>
</s:Application>

项目渲染器名称：- ADGRowColumnMenu

 <?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true">
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
                super.data = value;
                lblData.addEventListener(MouseEvent.CLICK, clickHandler);   
            }

            private function clickHandler(event:MouseEvent):void
            {
                var eventData:AGDRowCloumnMenuEvent = new AGDRowCloumnMenuEvent(AGDRowCloumnMenuEvent.MENU_EVENT,true);
                eventData.eventInfo = listData['dataField'];
                dispatchEvent(eventData);
            }

        ]]>
    </fx:Script>
    <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>

自定义事件，您可以通过它发送自定义数据名称：-AGDRowCloumnMenuEvent

package
{
    import flash.events.Event;

    public class AGDRowCloumnMenuEvent extends Event
    {
        public static const MENU_EVENT:String = "menuEvent";

        public var eventInfo:Object = null;

        public function AGDRowCloumnMenuEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

希望以上代码对你有所帮助。