在 flex 中自定义 PopUpMenuButton 控件

Question

我有一个关于 PopUpMenuButton 控件的问题。

这个控件的现有行为是：

“PopUpMenuButton 控件有两个按钮（主按钮和辅助按钮（看起来像“v”向下箭头符号））。当用户单击主按钮时，控件会调度 itemClick (MenuEvent.ITEM_CLICK) 事件，该事件包含有关所选菜单项的信息。因此，当用户单击主按钮或从弹出菜单中选择当前项目时，会调度相同的 itemClick 事件。因为在这两种情况下都调度了相同的事件，所以单击主按钮会产生与单击最后一个选定的 menuItem 相同的行为，因此主按钮扮演了经常使用的菜单项的角色。”

在我的应用程序中，我需要更改主按钮的现有功能。它不应该导航到经常使用的菜单项屏幕，而是应该打开弹出窗口，并且它的行为应该与辅助按钮 (v) 完全相同。

我尝试使用 PopUpMenuButton 控件的 openAlways=true 属性。但它并没有完全解决问题。非常感谢任何帮助。

编辑 -

我已经尝试过下面 TRISH 提到的选项。但这并没有解决我的问题。

每当我们点击 PopUpMenuButton 控件的主按钮时，都会调度两个事件。第一个 click 事件将被调度，然后是 itemClick 事件。在 Click 事件处理程序中，我们正在编写代码来打开弹出窗口，因此它正在打开弹出窗口，并且在 itemclick 事件处理程序中，相应的页面导航代码在那里，因此它正在导航到该特定页面。 （这两个正在一个接一个地发生，所以第一个弹出窗口正在打开，并且由于 itemclick 处理程序代码，它会在几秒钟内导航到最近打开的页面。因此，每当我们单击主按钮时，这两个动作都是并行发生的，因此我们会得到一个弹出窗口闪烁但不稳定的弹出窗口。如果我们修改 itemclick 处理程序中的任何内容，它会影响弹出按钮的功能，因为两个按钮单击的处理程序相同。即使在 itemclick 事件的情况下，事件目标也相同，而与主按钮或弹出按钮无关。 )

Answer 1

编辑：在我看来，PopUpButton 的行为可能比 PopUpMenuButton 更适合您。我写了一个应用程序来说明我理解你想要的行为：

• 单击主按钮会打开弹出菜单，就像箭头按钮一样

• 单击主按钮不应触发最后一个选定菜单项的项目单击

  <?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">
  
      <fx:Script>
          <![CDATA[
              import mx.controls.Alert;
              import mx.controls.Menu;
              import mx.events.MenuEvent;
  
              [Bindable]
              private var menu:Menu;
  
              private function initMenu():void {
                  menu = new Menu();
                  var dp:Object = [
                          {label: "New Folder"}, 
                          {label: "Sent Items"}, 
                          {label: "Inbox"}
                      ];        
                  menu.dataProvider = dp;
                  menu.addEventListener("itemClick", changeHandler);
              }
  
              private function changeHandler(event:MenuEvent):void {
                  var label:String = event.label;        
                  Alert.show(label);
                  // popUpButton.label = event.label;
                  popUpButton.close();
              }           
          ]]>
      </fx:Script>
  
      <s:VGroup>
          <mx:PopUpButton id="popUpButton" openAlways="true"
                                          label="Select a control..." 
                                          popUp="{menu}"
                                          preinitialize="initMenu()" />   
      </s:VGroup>
  </s:Application>