Flex variable height for rows in a TileList

Question

I have a TileList with a custom ItemRenderer (IR). The IR can be a TextInput, a TextArea or a ComboBox. If in a row there is a TextArea, I want this row to have more height than the others. I don't care if all rows have to have the same height after all. What I care is that If I have a form with no TextArea in it, I want the row height to be the lowest possible.

After some work, I achieved the following code. But, as you will appreciate in enclosed screenshoots, I haven't achieved what I want. The first time you enter in a form, it looks wrong, but the second time you enter in it, it looks ok. But, If you enter into another form with different fields, and reopen the one you opened just before, it looks wrong again. When it looks wrong, It seems that every row have the standart height.

What i'm missing? Should I customize TileList in some way? Do I have put the invalidateDisplayList and invalidateSize in the wrong place?

Form 1 Case Wrong:
http://flic.kr/p/bfJSUM

Form 1 Case Ok:
http://flic.kr/p/bfJSQT

Form 2 Case Wrong:
http://flic.kr/p/bfJSSn

Form 2 Case Ok:
http://flic.kr/p/bfJUwe

TileList:

<mx:VBox id="camposextras" visible="true" verticalGap="0" horizontalGap="0" width="100%" height="100%" >
            <mx:TileList wordWrap="true" variableRowHeight="true" width="100%" textAlign="left" columnCount="2"  dataProvider="{model.specialfield_issue_list}" itemRenderer="org.nevis.cairngorm.mod.view.IRCampoEspecial" direction="horizontal">
            </mx:TileList>
        </mx:VBox>

ItemRenderer:

    <?xml version="1.0"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
        horizontalAlign="left" verticalAlign="middle"
        verticalGap="0" borderStyle="none" width="100%"
     horizontalScrollPolicy="off" verticalScrollPolicy="off"
     >

        <mx:Script>
            <![CDATA[
            import mx.controls.TextArea;
            import mx.controls.Text;
            import org.nevis.cairngorm.mod.model.ModelLocator;
            import mx.core.UIComponent;
            import mx.controls.Label;
            import mx.controls.ComboBox;
            import mx.controls.TextInput;
            import utils.Utils;
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            [Bindable]
            public var model:ModelLocator=ModelLocator.getInstance();

            [Bindable]
            private var fieldLabelVisible:Boolean = false;

            [Bindable]
            private var textInputVisible:Boolean = false;

            [Bindable]
            private var textAreaVisible:Boolean = false;

            [Bindable]
            private var comboBoxVisible:Boolean = false;

            [Bindable]
            private var mandatoryLabelVisible:Boolean = false;

            [Bindable]
            private var _contenedorHeight:int = 25;


            public function updata_valor_text(valor:Event):void {
                data.value=valor.currentTarget.text;
            }

            public function updata_valor_combo(valor:Event):void {
                data.value=valor.currentTarget.selectedItem.valuesspecialfieldid
            }

            /**
             * Make sure IR has real variable height for rows
             */
            override public function get height():Number {
                //Make sure variableRowHeight is set to true in the container of this IR
                return _contenedorHeight;
            }

            override public function set height(value:Number):void {
                _contenedorHeight = value;
            }

            override public function set data(value:Object):void {
              var i:int;
              var sel:int;

              super.data = value;

              callLater(function onceAllCreated():void{

                  if (value){

                    _contenedorHeight = 25; //Default value

                    fieldLabelVisible = true;
                    lb.text=value.spe_name;
                    lb.toolTip=value.spe_description;
                    lb.width=150;  
                    lb.name='etiqueta'; 
                    lb.styleName='texto-iza';

                    switch (value.type){
                    case "text":

                        if(value.spe_max<=40) {

                            ti.text=value.value;
                            ti.name='texto';
                            ti.maxChars=value.spe_max;

                            if(value.spe_max<=20) {
                                ti.width=150;
                            } else {
                                ti.width=300;
                            }

                            textInputVisible = true;
                        } else {
                            ta.text=value.value;
                            ta.name='texto';
                            ta.maxChars=value.spe_max;

                            ta.width=300;

                            textAreaVisible = true;

                            _contenedorHeight = 60;
                        }       
                    break;
                    case "select":
                        cb.labelField='val_value';
                        cb.name='seleccionable';

                        cb.width=150;


                         comboBoxVisible = true;                        
                    break;
                    default:break;
                    }     

                    if (value.spe_mandatory==1){
                        mandatory.text="*";
                        mandatory.toolTip="Mandatory";
                        mandatory.width=10;  
                        mandatory.name='mandatory'; 
                        mandatory.styleName='texto-iza';    
                        mandatoryLabelVisible = true;       
                    }
                  } else {
                      fieldLabelVisible = false;
                      textInputVisible = false;
                      textAreaVisible = false;
                      comboBoxVisible = false;
                      mandatoryLabelVisible = false;
                  }
                  invalidateDisplayList();
                  invalidateSize();
                });
            } 

            ]]>
        </mx:Script>
    <mx:HBox id="contenedor" toolTip="{data.spe_description}" verticalAlign="middle" horizontalAlign="left" width="100%" height="{_contenedorHeight}">
        <mx:Label id="lb" visible="{fieldLabelVisible}" includeInLayout="{fieldLabelVisible}"/> 
        <mx:TextInput id="ti" visible="{textInputVisible}" includeInLayout="{textInputVisible}" change="updata_valor_text(event)"/>
        <mx:TextArea id="ta" visible="{textAreaVisible}" includeInLayout="{textAreaVisible}" height="50" change="updata_valor_text(event)"/>
        <mx:ComboBox id="cb" visible="{comboBoxVisible}" includeInLayout="{comboBoxVisible}" change="updata_valor_combo(event)"/>
        <mx:Label id="mandatory" visible="{mandatoryLabelVisible}" includeInLayout="{mandatoryLabelVisible}"/>
    </mx:HBox>
</mx:VBox> 

NOTE: It is an old app and it's done with Flex 2 SDK 2.0.1 Hotfix 3.

Thanks for your help!

Answer 1

Can you put a minHeight on the item renderer?