changin the default width and height of the dropdownlist

Question

i want a dropdownlist that is wide enough to accommodate the larger item in the dropdown in display area of the main control.(.i.e. dropdownlist with the functionality of MX Combobox) please guide me on this .

Answer 1

You should create custom DropDownList (extending original) and override dataProvider setter and measure() method. In dataProvider setter you should invoke invalidateSize() and in measure you should iterate your data provider and find the largest label (you can assign new text to the label and compare their width).

Answer 2

This will adjust the width of the drop down to the width of the data. I forget where the example is where i got the code from. The height can be set by rowCount I believe.

package valueObjects.comboBox{

    import flash.events.Event;
    import mx.controls.ComboBox;
    import mx.core.ClassFactory;
    import mx.core.IFactory;
    import mx.events.FlexEvent;

    public class ExtendedComboBox extends ComboBox{
        private var _ddFactory:IFactory = new ClassFactory(ExtendedList);

        public function ExtendedComboBox(){    
            super();
        }
        override public function get dropdownFactory():IFactory{
            return _ddFactory;
        }
        override public function set dropdownFactory(factory:IFactory):void{
            _ddFactory = factory;
        }
        public function adjustDropDownWidth(event:Event=null):void{    

        this.removeEventListener(FlexEvent.VALUE_COMMIT,adjustDropDownWidth);
            if (this.dropdown == null){
                callLater(adjustDropDownWidth);
            }else{
                var ddWidth:int = this.dropdown.measureWidthOfItems(-1,this.dataProvider.length);
                if (this.dropdown.maxVerticalScrollPosition > 0){                    
                    ddWidth += ExtendedList(dropdown).getScrollbarWidth();                    
                }                
                this.dropdownWidth = Math.max(ddWidth,this.width);                
            }
        }
        override protected function collectionChangeHandler(event:Event):void{
            super.collectionChangeHandler(event);
            this.addEventListener(FlexEvent.VALUE_COMMIT,adjustDropDownWidth);        
        }
    }
}



package valueObjects.comboBox{
    import mx.controls.List;

    public class ExtendedList extends List{
        public function ExtendedList(){
            super();
        }
        public function getScrollbarWidth():int{
            var scrollbarWidth:int = 0;
            if (this.verticalScrollBar != null){
                scrollbarWidth = this.verticalScrollBar.width;
            }
            return scrollbarWidth;
        }

    }
}




<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" mlns:comboBox="valueObjects.comboBox.*" >

  <comboBox:ExtendedComboBox labelField="data.totext()" itemRenderer="mx.controls.Label" />
</mx:Canvas>

Answer 3

To increase the height of a combo box's drop-down list, use "rowCount" property. This is for Flex 3.6.0

Answer 4

Check out this example from Flex Examples. You just have to create a skin for the DropDownList and set the popUpWidthMatchesAnchorWidth="false" property.

Answer 5

it is achieved by following code :

public override function set dataProvider(value:IList):void
    {

        var length:Number = 0;
        var array:Array = value.toArray();
        super.dataProvider = value;
        var labelName:String = this.labelField;
        var typicalObject:Object =new Object();
        for each(var obj:Object in array)
        {
            var temp:Number = obj[labelName] .length;
            if( length < temp )
            {

                length = temp;
                Alert.show(" length  "+length.toString());
                typicalObject = obj;
            }
            //length = length < Number(obj[labelName].length) ? Number(obj[labelName].length) : length
            //Alert.show(obj[labelName].length);
            this.typicalItem = typicalObject;
        }



    }

Answer 6

Sorry, better take off both the width and height from the field.