1 Reply Latest reply on Nov 27, 2009 2:03 AM by sagisid

    ComboBox with variable dropdown width.

    *Prashant Shelke* Level 4

      Hi, I have one custom combo box, which will useful to show tool tip on its items & has variable drop-down width to show items properly.

      Hope this will help if some one needed.

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();" updateComplete="adjustComboDropDownWidth();"
          buttonMode="true">
         
          <mx:Script>
          <![CDATA[
              import mx.controls.List;
               private var _selectedValue:String;
             
               private var _selectedLable:String;
               
               private var bSelectedValueSet:Boolean = false;
               private var bDataProviderSet:Boolean = false;
              
               [Bindable]
                  private var myDropdownFactory:ClassFactory;   
               // Override committ, this may be called repeatedly
               override protected function commitProperties():void
               {
                  // invoke ComboBox version
                  super.commitProperties();


                  // If value set and have dataProvider
                  if (bSelectedValueSet && bDataProviderSet)
                  {
                     // Set flag to false so code won't be called until selectedValue is set again
                     bSelectedValueSet=false;
                     // Loop through dataProvider
                     for (var i:int=0;i<this.dataProvider.length;i++)
                     {
                        // Get this item's data
                        var item:String = this.dataProvider[i].data;
                            
                        // Check if is selectedValue
                        if(item == _selectedValue)
                        {
                           // Yes, set selectedIndex
                           this.selectedIndex = i;
                           break;
                        }
                     }
                  }
               }


               // Trap dataProvider being set
               override public function set dataProvider(o:Object):void
               {
                  // invoke ComboBox version
                  super.dataProvider = o;


                  // This may get called before dataProvider is set, so make sure not null and has entries
                  if (o!=null && o.length)
                  {
                     // Got it, set flag
                     bDataProviderSet = true;
                  }
               }


               // set for selectedValue
               public function set selectedValue(s:String):void
               {
                  // Set flag
                  bSelectedValueSet = true;
                  // Save value
                  _selectedValue = s;
                  // Invalidate to force commit
                  invalidateProperties();
               }
              
               /**************************************************************************************** **
             
                * @description : To show tool-tip on line items objects of combobox.
                ***************************************************************************************** /
                public function init():void
                {
                      myDropdownFactory         = new ClassFactory(List);
                      myDropdownFactory.properties = {showDataTips:true, dataTipFunction:myDataTipFunction}
                      this.dropdownFactory    = myDropdownFactory;
                }         
               
                   private function myDataTipFunction(value:Object):String
                {
                      return (value.label);
                }


               /**************************************************************************************** **
              
                * @method name : adjustComboDropDownWidth()
                * @i/p params  : ComboBox
                * @return         : Number
                * @description : computes dropdown width according to what dataprovider provided to it.
                ***************************************************************************************** /
                private function adjustComboDropDownWidth():void
                {
                        this.dropdownWidth    = calculateCustomPreferredSizeFromData();                  
                }                      
              
               /**************************************************************************************** **
            
                * @method name : calculateCustomPreferredSizeFromData()
                * @i/p params  : -
                * @return            : Number
                * @description : computes dropdown width according to what dataprovider provided to it.
                ***************************************************************************************** /
                public function calculateCustomPreferredSizeFromData():Number
                {
                      var dropDownWidth:Number    = this.calculatePreferredSizeFromData(this.dataProvider.length).width+14;
                      if(dropDownWidth > this.width)
                      {
                          return dropDownWidth;
                      }
                      else
                      {
                          return this.width;
                      }
                }
            ]]>
         </mx:Script>
      </mx:ComboBox>

       

      Thanks.