I am trying to make a combo box with variable height items which i have managed to do by writing this:
<comboBox:MCComboBox
id="comboBox"
prompt="{_prompt}"
maxWidth="{container.width}"
itemRenderer="{new ClassFactory(MCComboBoxItemRenderer)}"
dataProvider="{_dataProvider}"
change="_updateAnswerVO(event)"
open="_openComboBoxHandler(event)"/>
private function _openComboBoxHandler(e:DropdownEvent):void {
var list:List = e.currentTarget.dropdown
list.wordWrap = true;
list.variableRowHeight = true;
list.height = list.measureHeightOfItems();
}
This is being displayed properly. With some minor glitches for the positioning and the height of the dropdown.
The problem is with displaying this selected item
i've created a custom combo box that uses the item renderer class as its display instead of textInput
protected var textInputReplacement:UIComponent;
override public function set itemRenderer(value:IFactory):void {
super.itemRenderer = value;
createChildren();
}
override protected function createChildren():void {
super.createChildren();
if ( !textInputReplacement ) {
if ( itemRenderer != null ) {
//remove the default textInput
removeChild(textInput);
//create a new itemRenderer to use in place of the text input
textInputReplacement = itemRenderer.newInstance();
textInputReplacement.mouseEnabled = textInputReplacement.mouseChildren = false;
BindingUtils.bindProperty(textInputReplacement, "data", this, "selectedItem", true);
addChild(textInputReplacement);
}
}
}
override public function set prompt(value:String):void {
super.prompt = value;
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
if ( textInputReplacement ) {
textInputReplacement.width = unscaledWidth;
textInputReplacement.height = unscaledHeight;
}
}
override public function set selectedIndex(value:int):void {
super.selectedIndex = value;
if (textInputReplacement && textInputReplacement.height)
height = textInputReplacement.height;
}
The problem is I can't get the height of the combobox to adjust itself based on the selected answer since it seems to be a fixed height, how can i set it to the actual itemRenderer's height and not the container's?
Hi ,
Try the below line of code to wrap the Text in the ComboBox..._openComboBoxHandler() function...
e.currentTarget.dropdown.variableRowHeight = true;
I think you are already using the above line of code in your function...In addition to this add an itemRenderer for your ComboBox in which it is having the
<mx:Text /> control as the root tag...and specify the width for the Text..then the text will be wrapped in your ComboBox..
Thanks,
Bhasker Chari
I do set the variableRowHeight in my _openComboBoxHandler and i have a custom item renderer that is a multiline textfield, the problem is not in the combo box, the problem is in the display of the combobox. I have successfully managed to make it a multiline item if i set the height of it. The problem is that i have to set this height and i can't reset the height based on the selected comboBox item.
For example, when the combo box is displayed, it should display the prompt "select an answer" which is one line high therefore combobox.height is about 25 pixels (not set manually). But if i select item 3 which has a value of "super long medical text that takes 3 lines to write" then the combobox should readjust its height to 75 pixels (3 rows). I'm trying to read the custom textInput's height that i've added so that the combo box's height adjust itself to the selected answer, but still can't get it. As if the combo box was a canvas with a button background.
I've created a sort of hack to get around this. I created a container with my comboBox and an item renderer (mouseEnabled=false), the combo box is set to 100% of the container. So when i click on the combo box, i get the drop down and all, but the display for the selected item is exactly what i want it to be.
Only issue now is that with variableRowHeight, the list dropdown doesn't place itself very well. If the combobox is quite low, the dropdown will place itself above but will be floating well above the top of the combobox. Any ideas how to accomodate this?
I do, it's in the function (in my original posting). If i don't set the height though, it only wants to scroll.
private function _openComboBoxHandler(e:DropdownEvent):void {
var list:List = e.currentTarget.dropdown
list.wordWrap = true;
list.variableRowHeight = true;
list.height = list.measureHeightOfItems();
}
They are flex scroll bars, they appear strictly in the dropdown. here is the code i have for my custom list, if i don't have the listener on FlexUpdate, then it won't set the height correctly. This will work in a swf, but not when on a webpage (IE and Firefox tested)
public function MCCustomDropDown()
{
super();
variableRowHeight = true;
filters = [new DropShadowFilter(4,45,0x333333, 1, 0, 0)];
}
override public function set dataProvider(value:Object):void {
super.dataProvider = value;
if (dataProvider)
rowCount = dataProvider.length;
addEventListener(FlexEvent.UPDATE_COMPLETE, _updateHandler, false, 0, true);
}
private function _updateHandler (e:Event):void {
var previousHeight:Number = height;
height = measureHeightOfItems();
if (height == previousHeight)
removeEventListener(e.type, _updateHandler);
}
I don't think there is any code looking to compensate for late-breaking
information about height. The height is checked at the time it is popped up
and that's it. You will probably need to get the exact measurements early
which will mean calling measureHeightOfItems and factoring in viewMetrics.
The view metrics were always 0 when i tried to read them, but playing with screen calipers and a lot of logs while in the browser brought me to the discovery that the dropdown was scaled. so i changed the line
height = measureHeightOfItems();
to
height = measureHeightOfItems() * scaleY;
and the problem was solved.
thanks for the help
North America
Europe, Middle East and Africa
Asia Pacific
Copyright © 2012 Adobe Systems Incorporated. All rights reserved.
Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).