在DataGrid itemEditor下拉列表中的滚动条不起作用 [英] Scrollbars in dropdownlist inside DataGrid itemEditor not working

问题描述

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

有一个关于 Adob​​e论坛，描述同样的问题，但它相当陈旧，尚未得到回答。

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

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

Scratch.mxml（主要代码）

 code><？xml version =1.0encoding =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：脚本> 
<！[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; 
} 
 //如果使用labelFunction，则必须指定一个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：脚本> 
< fx：声明> 
<！ - 将非视觉元素（例如服务，价值对象）放在这里 - > 
< / fx：声明> 
< mx：DataGrid id =glGridtop =10left =10right =10bottom =10
 dataProvider ={dataList}editable =true > 
 
< mx：columns> 
< mx：DataGridColumn id =col2
 headerText =列2
 itemEditor =Renderers.ddlRenderer
 labelFunction =col2Label
 dataField = col2
 sortCompareFunction =sortCol2/> 
< / mx：columns> 
< / mx：DataGrid> 
< / s：WindowedApplication> 
  

ddlRenderer.mxml：

 <？xml version =1.0encoding =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：脚本> 
<！[CDATA [
 import mx.collections.ArrayList; 
 
 import spark.events.IndexChangeEvent; 
 
 [Bindable] private var myChoices：ArrayList = new ArrayList（）; 
 
覆盖公共函数集数据（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; （var i：int = 0; i< myChoices.length; i ++）{
 lineChoice = myChoices.getItemAt（i）as String; 
 
 if（lineChoice == theChoice）{
 ddl.selectedItem = lineChoice; 
 break; 
} 
} 
} 
} 
} 
 
]]> 
< / fx：脚本> 
 
< s：DropDownList id =ddl
 width =100％
 dataProvider ={myChoices}/> 
< / s：MXDataGridItemRenderer> 
  

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

我被困在这一个上，非常感谢一些帮助。

谢谢

Dan

解决方案

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

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

 < s：DropDownList id =ddl
 width =100％
 dataProvider ={myChoices}open =ddl.skin ['dropDown']。owner = this /> 
  

我测试了这个，它解决了我的问题。希望这样也能帮助别人。

I have a DropDownList inside the itemEditor of my DataGrid. There are enough items in the DropDownList to justify scrollbars. You can see the scrollbars, and the mousewheel works fine. If you move the mouse over the scrollbars, they'll change appearance fine (mouseover is working). If you click on them, the DropDownList closes as if you'd clicked elsewhere in the data grid.

There's a comment on the Adobe Forums that describe the same problem, but it is fairly old and has not been answered.

I've been experimenting with custom skins hoping to find a way to trap the mouse event, but have been unsuccessful.

FWIW, this is Flex4, as an AIR app.

Scratch.mxml (main code)

    <?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>

To see the problem, run the code, click on "abc" to trigger the itemRenderer, click on the DropDownList to see the choices, then try clicking on the scrollbar.

I'm stumped on this one, and would greatly appreciate some help.

Thanks

Dan

解决方案

I posted this to Adobe as a bug (SDK-27783, Flex SDK, Spark:DropDownList), which was just closed today. Alex Harui had a good workaround:

Workaround is to change renderer as follows:

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

I tested this and it solves my problem. Hopefully this will help others as well.

这篇关于在DataGrid itemEditor下拉列表中的滚动条不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！