如何在液体布局中为itemrenderer中的spark列表设置标签宽度?

时间:2011-06-29 22:43:37

标签: flash flex actionscript-3 width itemrenderer

在我所拥有的旨在100%扩展到Web窗口的flex项目中,我有一个火花列表。我有一个简单的itemrenderer,它获取数据并显示一个名称和一条消息。想象它就像一个简单的即时通讯显示器。问题是,对于我的msg_txt标签,我想给它一个宽度,该宽度是持有它的父列表的宽度。

我尝试将horizo​​ntalScrollPolicy设置为off,也尝试使用width =“{this.parent.parent.width}”(以及this.parent.width)作为项呈示器内的spark标签。

并且在标签中我尝试了一些像left =“0”right =“0”maxWidth =“{this.width}”的东西,但没有真正的诀窍。

如何使此标签具有包含它的列表的最大宽度,并确保在浏览器大小发生变化且列表大小发生变化时调整大小?

继承人名单:

<s:List id="chat_content" width="100%" height="100%"
                alternatingItemColors="[#EEEEEE,#E6E6E6]" contentBackgroundColor="#EEEEEE"
                horizontalScrollPolicy="off" itemRenderer="renderers.ActiveChatItemRenderer">
        </s:List>

继承人是项目者:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;

            import spark.components.List;

            override public function set data(value:Object):void {
                super.data = value;
                if (data == null)
                    return;

                if(data.systemMsg)
                {

                }
                if(data.name)
                {
                    name_label.text=data.name;
                }
                if(data.icon)
                {

                }
                if(data.msg)
                {
                    msg_txt.text=data.msg;
                }




            }





        ]]>
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>

    <s:HGroup id="container" horizontalAlign="left" verticalAlign="top" paddingTop="10" paddingBottom="10">
        <s:VGroup horizontalAlign="center" verticalAlign="middle"
                  width="100">
            <s:Label id="name_label" fontWeight="bold" text="Name: "
                     fontSize="18"/>
        </s:VGroup>
        <s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"/>


    </s:HGroup>

</s:ItemRenderer>

2 个答案:

答案 0 :(得分:3)

创建itemRenderer后,您是否以编程方式尝试 percentWidth percentHeight ?(

我没有尝试过下一个:

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark" width="100%" height="100%">

答案 1 :(得分:0)

在itemRenderer的子项上设置百分比宽度属性:

<s:HGroup id="container" horizontalAlign="left" verticalAlign="top" paddingTop="10" paddingBottom="10" width="100%">
    <s:VGroup horizontalAlign="center" verticalAlign="middle"
              width="100">
        <s:Label id="name_label" fontWeight="bold" text="Name: "
                 fontSize="18"  width="100%"/>
    </s:VGroup>
    <s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"  width="100%"/>
</s:HGroup>

我不清楚你要追求的是什么样的布局。由于代码中只有两个标签;为什么你需要两组?如果要并排显示这两个项目,可以使用以下内容:

<s:Label id="name_label" fontWeight="bold" text="Name: " fontSize="18"  width="100" x="0" y="0"/>
<s:Label id="msg_txt" text="msg text here" width="{this.parent.parent.width}"  width="100%" x="{name_label.x + name_label.width}" y="0"/>

我怀疑它会在不使用额外组的情况下为您提供类似的布局。