[英]Flex datagrid: Add a Menu control for each row/column
我試圖弄清楚這一點,但未能做到。 我有一個AdvancedDataGrid,並且每一行都有列。 每個列元素可以包含文本/圖像或任何自定義UiComponent。
我想要的是用戶能夠單擊一列,然后顯示一個像這樣的自定義菜單!(http://livedocs.adobe.com/flex/3/html/images/menu.png)
因此,當用戶單擊第1行第1列(例如,員工名稱)時,菜單中的選項可能是:-刪除員工-顯示員工報告
當用戶單擊第1行第2列(員工狀態)時,選項可以是:-刪除員工-將員工設置為退休
我的問題是,當我單擊UiComponent或datagrid中的Text時,不會觸發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>
項目渲染器名稱:-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);
}
}
}
希望以上代碼對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.