11 Replies Latest reply on Jan 31, 2011 11:50 AM by Flex harUI

    ComboBox Issue

    Flexy Flex

      Hi,

       

      Clicking on the combobox rapidly is making it not to open. The only way I can open it from there after is to recreate the component again.

       

      I am using the combobox to be displayed in one of the state in the title window popup. This combobox is used as FormItem in a form.

       

      The dataprovider for the combobox is being populated in the creationComplete handler of the title window.

       

      Code sample of the dataProvider:

       

      [Bindable] private var dp :  ArrayCollection;

       

      private function onCreationComplete(event : Event):void{
                      dp = new ArrayCollection();
                     
                      var obj: Object =    new Object();
                      obj.label = "Line1";
                      obj.id = "Line1";
                      obj.width = 8500;
                      obj.height = 11000;
                      obj.shape = "Line";
                      documentAC.addItem(obj);
                     
                      obj=    new Object();
                      obj.label = "Line2";
                      obj.id = "Line2";
                      obj.width = 8500;
                      obj.height = 14000;
                      obj.shape = "Line";
                      documentAC.addItem(obj);
                     
                      obj=    new Object();
                      obj.label = "Circle1";
                      obj.id = "Circle1";
                      obj.width = 8300;
                      obj.height = 11700;
                      obj.shape = "Circle";
                      documentAC.addItem(obj);
                     
                      obj=    new Object();
                      obj.label = "Circle2";
                      obj.id = "Circle2";
                      obj.width = 2000;
                      obj.height = 2000;
                      obj.shape = "Circle";
                      documentAC.addItem(obj);
                     
                      obj=    new Object();
                      obj.label = "Square1";
                      obj.id = "Square1";
                      obj.width = 4000;
                      obj.height = 4000;
                      obj.shape = "Square";
                      documentAC.addItem(obj);
                     
                      obj=    new Object();
                      obj.label = "Square2";
                      obj.id = "Square2";
                      obj.width = 4000;
                      obj.height = 6000;
                      obj.shape = "Square";
                      documentAC.addItem(obj);
                     
                      obj=    new Object();
                      obj.label = "Rectangle1";
                      obj.id = "Rectangle1";
                      obj.width = 4000;
                      obj.height = 6000;
                      obj.shape = "Rectangle";
                      documentAC.addItem(obj);
      }

       

      FormItem in which the combobox is used:

      <mx:FormItem id="shapeTypeFI" label="Shape Type">
              <mx:ComboBox id="shapeTypeCB" dataProvider="{documentAC}" labelField="label"
                          change="onShapeTypeCBChange(event)" selectedIndex="{documentTypeIndex}"/>           

      </mx:FormItem>

       

      Thanks,

      Amar.

        • 1. Re: ComboBox Issue
          miguel8312 Level 3

          is "documentAC" an array collection where is that in the code?

          Miguel

           

          Message was edited by: miguel8312

          • 2. Re: ComboBox Issue
            Flexy Flex Level 1

            Sorry dp itself is documentAC. I pasted dp for documentAC. My fault

            • 3. Re: ComboBox Issue
              miguel8312 Level 3

              also where is this function???

              "onShapeTypeCBChange(event)"  please post all your code is very hard to help when you only see half or less info.

              Miguel

               

              Message was edited by: miguel8312

              • 4. Re: ComboBox Issue
                Flexy Flex Level 1

                I see this issue only on clicking the combo rapidly and not while clicking selecting the label inside the combo.

                So in this scenario "onShapeTypeCBChange(event)" never gets called.

                 

                Thanks,

                Amar.

                • 5. Re: ComboBox Issue
                  miguel8312 Level 3

                  Amar

                  its very hard to replicate exactcly what you see unless i see your exact source code.

                   

                  i try this and clicked the combo box like a mad man  everything worked fine for me?...

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="onCreationComplete(event);" minWidth="955" minHeight="600">

                  <mx:Script>
                    <![CDATA[

                   

                  import mx.collections.ArrayCollection;
                   

                   

                  [Bindable]
                     public var dp :  ArrayCollection;
                     //public var dp2 :  ArrayCollection;

                   


                  private function onCreationComplete(event:Event):void{

                   

                   
                     dp = new ArrayCollection();

                   

                  var obj:Object =new Object();
                  obj.label = "Line1";
                  obj.id = "Line1";
                  obj.width = 8500;
                  obj.height = 11000;
                  obj.shape = "Line";
                  dp.addItem(obj);

                   

                  obj=    new Object();
                  obj.label = "Line2";
                  obj.id = "Line2";
                  obj.width = 8500;
                  obj.height = 14000;
                  obj.shape = "Line";
                  dp.addItem(obj);

                   

                  obj=    new Object();
                  obj.label = "Circle1";
                  obj.id = "Circle1";
                  obj.width = 8300;
                  obj.height = 11700;
                  obj.shape = "Circle";
                  dp.addItem(obj);

                   

                  obj=    new Object();
                  obj.label = "Circle2";
                  obj.id = "Circle2";
                  obj.width = 2000;
                  obj.height = 2000;
                  obj.shape = "Circle";
                  dp.addItem(obj);

                   

                  obj=    new Object();
                  obj.label = "Square1";
                  obj.id = "Square1";
                  obj.width = 4000;
                  obj.height = 4000;
                  obj.shape = "Square";
                  dp.addItem(obj);

                   

                  obj=    new Object();
                  obj.label = "Square2";
                  obj.id = "Square2";
                  obj.width = 4000;
                  obj.height = 6000;
                  obj.shape = "Square";
                  dp.addItem(obj);

                   

                  obj=    new Object();
                  obj.label = "Rectangle1";
                  obj.id = "Rectangle1";
                  obj.width = 4000;
                  obj.height = 6000;
                  obj.shape = "Rectangle";
                  dp.addItem(obj);

                   


                  shapeTypeCB.dataProvider = dp;

                   

                  }

                   

                    ]]>
                  </mx:Script>

                   

                   

                   

                   

                   


                  <mx:FormItem id="shapeTypeFI" label="Shape Type">
                    <mx:ComboBox id="shapeTypeCB"  labelField="label"
                        />           
                   
                  </mx:FormItem>

                   

                   

                  </mx:Application>

                   

                   

                   

                   

                  perhaps your pc cant't render the ui so fast. what kind of pc you have you can try on another pc and see if the same behavior occurs...

                  Miguel

                   

                  Message was edited by: miguel8312

                  • 6. Re: ComboBox Issue
                    Flexy Flex Level 1

                    Here are the files. Load the application and click rapidly on the Document type combo without waiting for the combo to open.

                     

                    Thanks,

                    Amar.

                    • 7. Re: ComboBox Issue
                      miguel8312 Level 3

                      where are teh files?

                      • 8. Re: ComboBox Issue
                        Flex harUI Adobe Employee

                        That's a bug that got fixed recently.  Should be in the Hero release.

                        • 9. Re: ComboBox Issue
                          Flexy Flex Level 1

                          Here is the code:

                           

                          <!ComboTest.mxml>

                          <?xml version="1.0" encoding="utf-8"?>

                          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                                              verticalGap="20"

                                              backgroundColor="0xFFFFFF" creationComplete="init()">

                               <mx:Script>

                                    <![CDATA[

                                         import mx.managers.PopUpManager;

                                          

                                         private function init():void{

                                              var dp:DocumentPopup = PopUpManager.createPopUp(this, DocumentPopup, true) as DocumentPopup;

                                               

                                              PopUpManager.centerPopUp(dp);

                                         }

                                    ]]>

                               </mx:Script>

                          </mx:Application>

                           

                           

                           

                          <!-- DocumentPopup.mxml -->

                          <?xml version="1.0" encoding="utf-8"?>

                          <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"

                                              title="Document Dimension"

                                              headerColors="[#8C8C8C,#8C8C8C]" borderAlpha="1"

                                              backgroundAlpha="1" close="removePopupHandler()" creationComplete="onCreationComplete(event)"

                                              showCloseButton="true">

                                

                               <mx:Script>

                                    <![CDATA[

                                         import mx.collections.ArrayCollection;

                                         import mx.events.ItemClickEvent;

                                         import mx.events.ListEvent;

                                         import mx.managers.PopUpManager;

                                         import mx.resources.ResourceManager;

                                          

                                         public static const EVENT_LABEL_DIMENSIONS_POPUP_OK_BUTTON_CLICKED:String = "labelDimensionsPopupOkClicked";

                                         public static const EVENT_LABEL_DIMENSIONS_POPUP_CANCEL_BUTTON_CLICKED:String = "labelDimensionsPopupCancelClicked";

                                          

                                          

                                          private var documentAC :  ArrayCollection;

                                          private var documentBorderAC :  ArrayCollection;

                                          

                                          private var documentTypeIndex:int = 6;

                                          private var documentBorderIndex:int = 0;

                                          

                                          

                                         public var documentBottom : Number;

                                         public var documentRight : Number;

                                          

                                         public var documentOrientation : String;

                                         public var documentShape : String;

                                          

                                          

                                         private function onCreationComplete(event : Event):void{

                                               

                                              documentAC = new ArrayCollection();

                                               

                                              var document : Object =     new Object();

                                              document.label = "Letter";

                                              document.id = "Letter";

                                              document.width = 8500;

                                              document.height = 11000;

                                              document.shape = "Rectangle";

                                              documentAC.addItem(document);

                                               

                                              document =     new Object();

                                              document.label = "Legal";

                                              document.id = " Legal ";

                                              document.width = 8500;

                                              document.height = 14000;

                                              document.shape = "Rectangle";

                                              documentAC.addItem(document);

                                               

                                              document =     new Object();

                                              document.label = "A4";

                                              document.id = "A4";

                                              document.width = 8300;

                                              document.height = 11700;

                                              document.shape = "Rectangle";

                                              documentAC.addItem(document);

                                               

                                              document =     new Object();

                                              document.label = "2X2";

                                              document.id = "2X2";

                                              document.width = 2000;

                                              document.height = 2000;

                                              document.shape = "Rounded Rectangle";

                                              documentAC.addItem(document);

                                               

                                              document =     new Object();

                                              document.label = "4X4";

                                              document.id = "4X4";

                                              document.width = 4000;

                                              document.height = 4000;

                                              document.shape = "Rounded Rectangle";

                                              documentAC.addItem(document);

                                               

                                              document =     new Object();

                                              document.label = "4X6";

                                              document.id = "4X6";

                                              document.width = 4000;

                                              document.height = 6000;

                                              document.shape = "Rounded Rectangle";

                                              documentAC.addItem(document);

                                               

                                              document =     new Object();

                                              document.label = "Custom";

                                              document.id = "Custom";

                                              document.width = 4000;

                                              document.height = 6000;

                                              document.shape = "Rectangle";

                                              documentAC.addItem(document);

                                               

                                              portraitRB.selected = true;

                                               

                                              documentBorderAC = new ArrayCollection();

                                              documentBorderAC.addItem({label:"Rectangle",id:"Rectangle",value:"Rect angle"});

                                              documentBorderAC.addItem();

                                               

                                         }

                                         private function onOkButtonClickHandler():void {

                                              PopUpManager.removePopUp(this);

                                               

                                              if(documentTypeCB.selectedItem.id == "file.menu.new.popup.documentType.combo.custom.label"){

                                                    

                                                   documentOrientation = null;

                                                    

                                                   var shapeObj:Object = documentBorderAC.getItemAt(documentBorderCB.selectedIndex);

                                                   documentShape = shapeObj.value;

                                                    

                                              }else{

                                                   var obj : Object = documentTypeCB.selectedItem;

                                                   //documentType = obj.value as String;

                                                   documentOrientation = null;

                                                    

                                                   if(orientationRBGroup.selection.value == "file.menu.new.popup.orientation.radioButton.portrait.label"){

                                                        documentBottom = obj.height;

                                                        documentRight = obj.width;

                                                   }else if(orientationRBGroup.selection.value == "file.menu.new.popup.orientation.radioButton.landscape.label"){

                                                        documentBottom = obj.width;

                                                        documentRight = obj.height;

                                                   }     

                                                   documentShape = obj.shape;

                                              }

                                               

                                              /Dispatching an event so its Handled in DataOutputContainer/

                                              var event:Event;

                                              event = new Event(EVENT_LABEL_DIMENSIONS_POPUP_OK_BUTTON_CLICKED);

                                              dispatchEvent(event);

                                         }

                                         private function removePopupHandler():void {

                                              PopUpManager.removePopUp(this);

                                               

                                              var event:Event;

                                              event = new Event(EVENT_LABEL_DIMENSIONS_POPUP_CANCEL_BUTTON_CLICKED);

                                              dispatchEvent(event);

                                         }

                                         /*

                                          

                          • Event handler function to select the orientation based on the radio button clicked.

                                         */

                                         private function orientationHandler(event:ItemClickEvent):void {

                                               

                                              var obj : Object = documentTypeCB.selectedItem;

                                              if(orientationRBGroup.selection.value == "file.menu.new.popup.orientation.radioButton.portrait.label"){

                                                   documentOrientation = "Portrait";

                                                   documentBottom = obj.height;

                                                   documentRight = obj.width;

                                              }else if(orientationRBGroup.selection.value == "file.menu.new.popup.orientation.radioButton.landscape.label"){

                                                   documentOrientation = "Landscape";

                                                   documentBottom = obj.width;

                                                   documentRight = obj.height;

                                              }

                                         }

                                         private function onDocumentTypeCBChange(event : ListEvent=null):void{

                                               

                                              if(documentTypeCB.selectedItem.id == "file.menu.new.popup.documentType.combo.custom.label"){

                                                   currentState = documentTypeCB.selectedItem.id;

                                                    

                                                   documentBottom = new Number(11000);

                                                   documentRight = new Number(6000);

                                              }else{

                                                   currentState = "";

                                                    

                                                   var obj : Object = documentTypeCB.selectedItem;

                                                   documentRight = new Number(obj.width as Number);

                                                   documentBottom = new Number(obj.height as Number);

                                              }

                                         }

                                         private function onDocumentTypeCBClick(event:Event):void{

                                              documentTypeCB.setFocus();

                                         }

                                         private function onDocumentBorderCBChange(event : ListEvent):void{

                                              /* if(documentBorderCB.selectedLabel == "Rectangle"){

                                              documentCornerRadius = LDConstants.DEFAULT_DOC_NO_CORNER_RADIUS;

                                              documentBorderStyle = LDConstants.DEFAULT_DOC_NO_BORDER_STYLE;

                                              }else if(documentBorderCB.selectedLabel == "Rounded-Rectangle"){

                                              documentCornerRadius = LDConstants.DEFAULT_DOC_CORNER_RADIUS;

                                              documentBorderStyle = LDConstants.DEFAULT_DOC_BORDER_STYLE;

                                              } */

                                         }

                                    ]]>

                               </mx:Script>

                                

                               <mx:transitions>

                                    <mx:Transition fromState="" toState="">

                                         <mx:Parallel targets="{[documentWidthFI,documentHeightFI,documentBorderFI]}">

                                              <mx:WipeDown duration="1000"/>

                                              <mx:Fade duration="1000"/>

                                         </mx:Parallel>

                                    </mx:Transition>

                                    <mx:Transition fromState="file.menu.new.popup.documentType.combo.custom.label" toState="*">

                                         <mx:Parallel targets="{[orientationFI]}">

                                              <mx:WipeUp duration="1000"/>

                                              <mx:Fade duration="1000"/>

                                         </mx:Parallel>

                                    </mx:Transition>

                               </mx:transitions>

                                

                               <mx:states>

                                    <mx:State name="file.menu.new.popup.documentType.combo.custom.label">

                                         <mx:RemoveChild target=""/>

                                          

                                         <mx:AddChild relativeTo="" position="after">                     <mx:FormItem id="documentWidthFI" label="Width">                          <mx:TextInput id="documentWidthTI" width="150" text="{documentRight/1000}"/>                     </mx:FormItem>                </mx:AddChild>                <mx:AddChild relativeTo="" position="after">

                                              <mx:FormItem id="documentHeightFI" label="Height">

                                                   <mx:TextInput id="documentHeightTI" width="150" text="{documentBottom/1000}"/>

                                              </mx:FormItem>     

                                         </mx:AddChild>

                                         <mx:AddChild relativeTo="" position="after">

                                              <mx:FormItem id="documentBorderFI" label="Document Border">

                                                   <mx:ComboBox id="documentBorderCB" dataProvider=""

                                                                   width="150" change="onDocumentBorderCBChange(event)" selectedIndex=""/>

                                              </mx:FormItem>

                                         </mx:AddChild>

                                    </mx:State>

                               </mx:states>

                                

                               <mx:VBox width="100%" height="100%" horizontalAlign="center">

                                    <mx:Form id="documentForm" width="100%">

                                         <mx:FormItem id="documentTypeFI" label="Document Type">

                                              <mx:ComboBox id="documentTypeCB" dataProvider="" labelField="label"

                                                              change="onDocumentTypeCBChange(event)" selectedIndex=""/>

                                         </mx:FormItem>

                                         <mx:FormItem id="orientationFI" label="Orientation">

                                              <mx:RadioButtonGroup id="orientationRBGroup" itemClick="orientationHandler(event)"/>

                                              <mx:RadioButton groupName="orientationRBGroup" id="portraitRB" value="file.menu.new.popup.orientation.radioButton.portrait.label"

                                                                  label="Portrait"

                                                                  width="150" />

                                              <mx:RadioButton groupName="orientationRBGroup" id="landscapeRB" value="file.menu.new.popup.orientation.radioButton.landscape.label"

                                                                  label="Landscape"

                                                                  width="150"/>

                                         </mx:FormItem>

                                    </mx:Form>

                                     

                                    <mx:HBox horizontalAlign="center">

                                         <mx:Button label="Ok"

                                                      click="onOkButtonClickHandler()"/>

                                         <mx:Spacer width="20"/>

                                         <mx:Button label="Cancel"

                                                      click="removePopupHandler()"/>

                                    </mx:HBox>

                               </mx:VBox>

                          </mx:TitleWindow>

                           

                          Thanks,

                          Amar.

                          • 10. Re: ComboBox Issue
                            Flexy Flex Level 1

                            This would be as part of next Flash or SDK release ?

                            • 11. Re: ComboBox Issue
                              Flex harUI Adobe Employee

                              Should be in the next SDK release.