Question

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

对Adobe Forums有一个评论相同问题的评论，但它已经很老了，还没有得到解答。

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

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

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

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

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

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

Answer 2

我不确定你应该捕获它是一个mouseEvent。您可以调试框架类：DropDownController.as，在systemManager_mouseDownHandler函数和processFocusOut函数的开头放置一个断点。你可以看到当你在dropdownlist'scrollbar上clic，而systemManager_mouseDownHandler函数没有调用closeDropDown时，processFocusOut会调用closeDropDown。

现在在应用程序的顶部添加一个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"

...

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

可能是关闭下拉列表的原因。

DataGrid itemEditor内的dropdownlist中的滚动条无法正常工作

2 个答案: