Apache flex FlexDataGrid:为每行/每列添加一个菜单控件

Apache flex FlexDataGrid:为每行/每列添加一个菜单控件,apache-flex,datagrid,menu,Apache Flex,Datagrid,Menu,我试图弄明白这一点,但没能弄明白。 我有一个AdvancedDataGrid,每行中都有列。每个列元素可以包含文本/图像或任何自定义UiComponent 我想要的是,用户能够点击一列,然后我显示一个自定义菜单,如下所示 !(http://livedocs.adobe.com/flex/3/html/images/menu.png) 因此,当用户单击第1行第1列(例如员工姓名)时,菜单中的选项可能是: -删除员工 -显示员工报告 当用户单击第1行第2列(员工状态)时,选项可以是: -删除员工 -

我试图弄明白这一点,但没能弄明白。 我有一个AdvancedDataGrid,每行中都有列。每个列元素可以包含文本/图像或任何自定义UiComponent

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

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

当用户单击第1行第2列(员工状态)时,选项可以是: -删除员工 -将员工设置为退休

我的问题是,当我单击UiComponent或datagrid中的文本时,不会触发click事件。即使我设置了背景填充和alpha


谢谢

请找到下面的示例,您可以从中获得一些想法:- 在这里,我张贴的样本,通过它你可以实现你所寻找的。您可以使用下面的逻辑使其更加自定义

<?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>

希望以上代码可以帮助您。

好的。完美的这对我很有用。诀窍是将事件处理程序添加到AdvancedDataGridItemRenderer的扩展版本中
 <?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>
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);
        }
    }
}