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

时间:2022-11-13 10:34:13

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.

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

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?

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

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

Form 1 Case错误:http://flic.kr/p/bfJSUM

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

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

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

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

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

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

TileList:

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:

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.

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

Thanks for your help!

谢谢你的帮助!

1 个解决方案

#1


1  

Can you put a minHeight on the item renderer?

你能在物品渲染器上放一个minHeight吗?

#1


1  

Can you put a minHeight on the item renderer?

你能在物品渲染器上放一个minHeight吗?