DataGrid itemEditor 内下拉列表中的滚动条不起作用

Question

我的 DataGrid 的 itemEditor 中有一个 DropDownList。 DropDownList 中有足够的项目来调整滚动条。您可以看到滚动条，并且鼠标滚轮工作正常。如果将鼠标移动到滚动条上，它们会很好地改变外观（鼠标悬停正常）。如果单击它们，DropDownList 将关闭，就像单击数据网格中的其他位置一样。

Adobe 论坛上有一条评论描述了相同的问题，但它是相当老了，还没有得到答复。

我一直在尝试自定义皮肤，希望找到一种捕获鼠标事件的方法，但没有成功。

FWIW，这是 Flex4，作为 AIR 应用程序。

Scratch.mxml（主代码）

    <?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        creationComplete="windowedapplication1_creationCompleteHandler(event)">
 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable] public var dataList:ArrayCollection = new ArrayCollection();

   protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
   {
    var o:Object = new Object();
    
    o.theChoice = "abc";
    o.choices = new ArrayCollection();
    o.choices.addItem("abc");
    o.choices.addItem("def");
    o.choices.addItem("ghi");
    o.choices.addItem("jkl");
    o.choices.addItem("mno");
    o.choices.addItem("pqr");
    o.choices.addItem("stu");
    o.choices.addItem("vwx");
    o.choices.addItem("yz ");
    dataList.addItem(o);
   }
   protected function col2Label(item:Object, column:DataGridColumn):String {
    return item.theChoice;
   }
   // If you use the labelFunction, then you must specify a sortCompareFunction
   private function sortCol2(obj1:Object, obj2:Object):int
   {
    var d1:String = obj1.col2 as String;
    var d2:String = obj2.col2 as String;
    if(d1 < d2) {
     return -1;
    } else if(d1 == d2) {
     return 0;
    }
    return 1;
   }

  ]]>
 </fx:Script>
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <mx:DataGrid id="glGrid" top="10" left="10" right="10" bottom="10"
     dataProvider="{dataList}" editable="true" >
  
  <mx:columns>
   <mx:DataGridColumn id="col2" 
          headerText="Column 2"  
          itemEditor="Renderers.ddlRenderer" 
          labelFunction="col2Label" 
          dataField="col2"
          sortCompareFunction="sortCol2"/>
  </mx:columns>  
 </mx:DataGrid>
</s:WindowedApplication>

ddlRenderer.mxml：

    <?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 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[
   import mx.collections.ArrayList;
   
   import spark.events.IndexChangeEvent;
   
   [Bindable] private var myChoices : ArrayList = new ArrayList();
   
   override public function set data(value:Object):void
   {
    if (value != null) {
     super.data = value;
     if (ddl && myChoices) {
      myChoices.removeAll();
      var theChoice:String = value.theChoice;
      
      myChoices.addAll(value.choices);
      
      var lineChoice : String;
      for (var i:int = 0; i < myChoices.length; i++) {
       lineChoice = myChoices.getItemAt(i) as String;
       if (lineChoice == theChoice) {
        ddl.selectedItem = lineChoice;
        break;
       }
      }
     }
    }
   }
   
  ]]>
 </fx:Script>
 
 <s:DropDownList id="ddl" 
     width="100%" 
     dataProvider="{myChoices}"/>
</s:MXDataGridItemRenderer>

要查看问题，请运行代码，单击“abc”以触发 itemRenderer，单击 DropDownList 以查看选项，然后尝试单击滚动条。

我被这个问题难住了，非常感谢一些帮助。

谢谢丹

​

Answer 1

我将此作为错误（SDK-27783、Flex SDK、Spark:DropDownList）发布到 Adob​​e，该错误今天刚刚关闭。 Alex Harui 有一个很好的解决方法：

解决方法是更改​​渲染器，如下所示：

<s:DropDownList id="ddl" 
 width="100%" 
 dataProvider="{myChoices}" open="ddl.skin['dropDown'].owner = this"/>

我对此进行了测试，它解决了我的问题。希望这也能帮助其他人。

Answer 2

我不确定这是您应该捕获的 mouseEvent。您可以调试框架类：DropDownController.as，在systemManager_mouseDownHandler函数和processFocusOut函数的开头放置断点。可以看到，当你点击下拉列表的滚动条时，systemManager_mouseDownHandler函数并没有调用closeDropDown，closeDropDown是由processFocusOut调用的。

现在在应用程序顶部添加一个 DropDownList 对象：

<s:DropDownList id="ddltop"
                    top="10"
                    left="10"
                    width="100%"
                    dataProvider="{dataList.getItemAt(0).choices}"
                    />
<mx:DataGrid id="glGrid" top="50" left="10" right="10" bottom="10"

...

并使用相同的断点再次调试。现在是 systemManager_mouseDownHandler 函数调用 closeDropDown。

也许是下拉列表关闭的原因。