Flex 3：可能將上下文菜單添加到DataGrid中的ItemRenderer？

Question

我有一個由多個應用程序共享的ItemRenderer（在DataGrid中），我想向它添加一個上下文菜單（而不是在每個應用程序中）。渲染是從Canvas類派生，並創建上下文菜單的代碼看起來是這樣的：

  var menuItem:ContextMenuItem = new ContextMenuItem("Test"); 
      menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextCallback); 

      var customContextMenu:ContextMenu = new ContextMenu();    
      customContextMenu.hideBuiltInItems(); //hide flash menu 
      customContextMenu.customItems.push(menuItem);    
      this.contextMenu = customContextMenu; 

然而，當我用鼠標右鍵單擊DataGrid中的細胞，我得到了默認的Flash上​​下文菜單。這不可能嗎？

編輯：這是一個完全可運行的例子，不顯示上下文菜單中的：

Application.mxml：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" 
    verticalAlign="middle" 
    backgroundColor="white"> 

<mx:Model id="items"> 
    <items> 
     <item label="Item 1" data="i001" propertyA="Item 1.A" propertyB="Item 1.B" /> 
     <item label="Item 2" data="i002" propertyA="Item 2.A" propertyB="Item 2.B" /> 
     <item label="Item 3" data="i003" propertyA="Item 3.A" propertyB="Item 3.B" /> 
     <item label="Item 4" data="i004" propertyA="Item 4.A" propertyB="Item 4.B" /> 
     <item label="Item 5" data="i005" propertyA="Item 5.A" propertyB="Item 5.B" /> 
     <item label="Item 6" data="i006" propertyA="Item 6.A" propertyB="Item 6.B" /> 
     <item label="Item 7" data="i007" propertyA="Item 7.A" propertyB="Item 7.B" /> 
     <item label="Item 8" data="i008" propertyA="Item 8.A" propertyB="Item 8.B" /> 
    </items> 
</mx:Model> 

<mx:DataGrid id="dataGrid" width="400" dataProvider="{items.item}"> 
    <mx:columns> 
     <mx:DataGridColumn headerText="No Menu" dataField="label" /> 
     <mx:DataGridColumn headerText="Menu" dataField="propertyA" itemRenderer="canvasRenderer"/> 
    </mx:columns> 
</mx:DataGrid> 

canvasRenderer.mxml：

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off" resize="this.setSize()" creationComplete="init()" implements="mx.controls.listClasses.IDropInListItemRenderer"> 
<mx:Script> 
    <![CDATA[ 
     import mx.controls.listClasses.ListData; 
     import mx.controls.dataGridClasses.DataGridListData; 
     import mx.controls.listClasses.BaseListData; 
     import mx.events.FlexEvent; 

     private var _listData:DataGridListData; 

     private function init():void { 
      var menuItem:ContextMenuItem = new ContextMenuItem("Copy", true); 
      menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function():void { 
       trace("selected"); 
      }); 

      var menu:ContextMenu = new ContextMenu(); 
      menu.hideBuiltInItems(); //hide flash menu 
      menu.customItems.push(menuItem);  
      this.contextMenu = menu; 
     } 

     public override function set data(value:Object):void { 
      super.data = value; 
      if(_listData && myLabel) { 
       var text:String = _listData.label ? _listData.label : value[_listData.dataField]; 
       myLabel.text = text; 
       myLabel.toolTip = text; 
      } 
     } 

     public function get listData():BaseListData { return _listData; } 
     public function set listData(value:BaseListData):void { _listData = DataGridListData(value); } 
     public function setSize():void { myLabel.width = this.width; } 
    ]]> 
</mx:Script> 

<mx:Label id="myLabel" truncateToFit="true"/> 

Answer 1

我已經使用Flextras DataSorter將上下文菜單添加到列表中的itemRenderer。但是，我沒有看到我所做的和您正在做的事情之間的區別。

源代碼在這裏： http://www.flextras.com/DataSorter/Samples/RightClick/srcview/index.html

和運行示例 http://www.flextras.com/DataSorter/Samples/RightClick/

你能分享更多的代碼？什麼是你添加上下文菜單的「this」？您的temRenderer是在線還是獨立的組件？

Answer 2

這工作：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
     layout="vertical" 
     verticalAlign="middle" 
     backgroundColor="white" 
     creationComplete="init()"> 

    <mx:Script> 
     <![CDATA[ 
      import mx.controls.Alert; 

      [Bindable] public var cm1:ContextMenu; 
      [Bindable] public var cm2:ContextMenu; 

      private function init():void { 
       var cmi1:ContextMenuItem = new ContextMenuItem("View item in column 1...", true); 
       cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect); 

       cm1 = new ContextMenu(); 
       cm1.hideBuiltInItems(); 
       cm1.customItems = [cmi1]; 
       cm1.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect); 

       var cmi2:ContextMenuItem = new ContextMenuItem("View item in column 2...", true); 
       cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_menuItemSelect); 

       cm2 = new ContextMenu(); 
       cm2.hideBuiltInItems(); 
       cm2.customItems = [cmi2]; 
       cm2.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect); 
      } 

      private function contextMenu_menuSelect(evt:ContextMenuEvent):void { 
       dataGrid.selectedIndex = lastRollOverIndex; 
      } 

      private function contextMenuItem_menuItemSelect(evt:ContextMenuEvent):void { 
       var obj:Object = dataGrid.selectedItem; 
       Alert.show("Property A: " + obj.propertyA + "\n" + "Property B: " + obj.propertyB, obj.label, Alert.OK); 
      } 
     ]]> 
    </mx:Script> 

    <mx:Model id="items"> 
     <items> 
      <item label="Item 1" data="i001" propertyA="Item 1.A" propertyB="Item 1.B" /> 
      <item label="Item 2" data="i002" propertyA="Item 2.A" propertyB="Item 2.B" /> 
      <item label="Item 3" data="i003" propertyA="Item 3.A" propertyB="Item 3.B" /> 
      <item label="Item 4" data="i004" propertyA="Item 4.A" propertyB="Item 4.B" /> 
      <item label="Item 5" data="i005" propertyA="Item 5.A" propertyB="Item 5.B" /> 
      <item label="Item 6" data="i006" propertyA="Item 6.A" propertyB="Item 6.B" /> 
      <item label="Item 7" data="i007" propertyA="Item 7.A" propertyB="Item 7.B" /> 
      <item label="Item 8" data="i008" propertyA="Item 8.A" propertyB="Item 8.B" /> 
     </items> 
    </mx:Model> 

    <mx:Number id="lastRollOverIndex" /> 

    <mx:DataGrid id="dataGrid" width="400" dataProvider="{items.item}"> 
     <mx:columns> 
      <mx:DataGridColumn headerText="Label"> 
       <mx:itemRenderer> 
       <mx:Component> 
        <mx:Label text="{data.label}" contextMenu="{outerDocument.cm1}"/> 
       </mx:Component> 
       </mx:itemRenderer> 
      </mx:DataGridColumn> 

      <mx:DataGridColumn headerText="Property A"> 
       <mx:itemRenderer> 
       <mx:Component> 
        <mx:Label text="{data.propertyA}" contextMenu="{outerDocument.cm2}"/> 
       </mx:Component> 
       </mx:itemRenderer> 
      </mx:DataGridColumn> 
     </mx:columns> 
    </mx:DataGrid> 

    <mx:Label text="{dataGrid.selectedItem.label}" /> 

</mx:Application>