Полосы прокрутки в выпадающем списке внутри DataGrid itemEditor не работает

Question

У меня есть DropDownList внутри itemEditor моей DataGrid. В 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

Я опубликовал это в Adobe как ошибку (SDK-27783, Flex SDK, Spark:DropDownList), которая была только что закрыта сегодня. У Алекса Харуи был хороший обходной путь:

Обходной путь должен изменить визуализатор следующим образом:

<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, метод 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"

...

и снова выполнить отладку с теми же точками останова. Теперь это функция systemManager_mouseDownHandler, которая вызывает closeDropDown.

Возможно, причина закрытия выпадающего списка.