0 Replies Latest reply on Apr 3, 2011 5:21 AM by ejchen77

    How to smoothly scroll a DropDownList of mx by a mouse wheel?

    ejchen77

      Hi Gurus,

       

      I have an application with many DropDownList in a form which makes the browser will have a vertical scroller.

      Everytime I try to select an item in a DropDownList by mouse wheel, the whole browser is scrolling, and the DropDownList is gone,

      it is not so user friendly.

       

      So I tried to make my DropDownList to capatuer the MOUSE_WHEEL event.

      But I found, I must scroll very very hard to make MOUSE_WHEEL to be triggered....

      And the whole browser is still scrolling before the DropDownList scrolling ...

       

      Please help me to solve 2 questions:

      1. Increase sensitivity to triger MOUSE_WHEEL event.

      2. If I use mouse wheel in a DropDownList, scroll the DropDownList, not the whole browser.

      (In the test code, please change height = "2000", and try to use mouse scroll, you will see what I mean)

       

      Thanks for any advice!

       

      Here is my testing code:

      ------------------------------------------------------------------------------------------ -------------------------

      <?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"
                     creationComplete="init()"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="300" height="600">

       

          <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                  [Bindable]
                  public var myArray1:ArrayCollection = new ArrayCollection([
                      {label:"1"}, {label:"2"}, {label:"3"}, {label:"4"},
                      {label:"5"}, {label:"6"}, {label:"7"}, {label:"8"}, {label:"9"}]);
                 
                  private function init():void {
                      systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel, false, 1000);
                  }           
                 
                  private function onMouseWheel(event:MouseEvent):void {
                      if (combo1.isDropDownOpen) {           
                         
                          var currentIndex:int = combo1.selectedIndex;
                          trace ("currentIndex: " + currentIndex);
                          trace ("event.delt: " + event.delta);
                          currentIndex = currentIndex - event.delta;
                         
                          if (currentIndex < 0) {
                              currentIndex = 0;
                          } else if (currentIndex > combo1.dataProvider.length) {
                              currentIndex = combo1.dataProvider.length - 1;
                          }
                          combo1.selectedIndex = currentIndex;   
                          combo1.ensureIndexIsVisible(combo1.selectedIndex);
                          trace ("newIndex: " + combo1.selectedIndex);
                         
                      }           
                  }                   
              ]]>
          </fx:Script>

       

          <s:DropDownList id="combo1" x="129" y="123" dataProvider="{myArray1}" labelField="label"></s:DropDownList>
      </s:Application>

      ------------------------------------------------------------------------------------------ -------------------------