Flex的可变高度,用于TileList中的行

时间:2012-01-20 12:33:37

标签: flex layout height tilelist

我有一个带有自定义ItemRenderer(IR)的TileList。 IR可以是TextInput,TextArea或ComboBox。如果连续存在TextArea,我希望此行的高度高于其他行。我不在乎所有行都必须具有相同的高度。我关心的是如果我有一个没有TextArea的表单,我希望行高可能是最低的。

经过一番工作,我实现了以下代码。但是,正如你将在封闭的大屏幕中欣赏,我没有实现我想要的。第一次输入表单时,它看起来不对,但第二次输入时,它看起来没问题。但是,如果您进入另一个具有不同字段的表单,并重新打开之前打开的表单,则会再次显示错误。当它看起来不对时,似乎每一行都有标准高度。

我缺少什么?我应该以某种方式自定义TileList吗?我是否将invalidateDisplayList和invalidateSize放在错误的位置?

表单1案例错误:
http://flic.kr/p/bfJSUM

表格1案例确定:
http://flic.kr/p/bfJSQT

表格2案例错误:
http://flic.kr/p/bfJSSn

表格2案例确定:
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> 

注意:这是一个旧的应用程序,它使用Flex 2 SDK 2.0.1 Hotfix 3完成。

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

你能在项目渲染器上放一个minHeight吗?