Flex數據網格：爲每行/列添加一個菜單控件

Question

我試圖弄清楚這一點，但我無法做到。 我有一個AdvancedDataGrid並在每一行中有列。每個列元素可以包含文本/圖像或任何自定義的UiComponent。

我想要的是用戶能夠點擊一列，然後顯示一個像這樣的自定義菜單 ！（http://livedocs.adobe.com/flex/3/html/images/menu。 PNG）

因此，當第1行1列（例如員工姓名）用戶點擊，在菜單選項可以是： -Delete員工 -Show員工報告

而上行時，用戶點擊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); 
     } 
    } 
} 

希望上面的代碼可以幫助你。