Question

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

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

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

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

我的问题是，当我单击UiComponent或数据网格中的Text时，不会触发click事件。即使我设置了backgroundfill和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);
        }
    }
}

希望上面的代码可以帮到你。

Flex datagrid：为每个行/列添加Menu控件

1 个答案: