Adobe Flex 4.5 Spark:将ItemRenderer组件绑定到Parent

时间:2011-07-13 17:12:58

标签: flex flex4.5 itemrenderer flex-spark

在Flex 3中,过去可以通过outerDocument绑定itemRenderer中的组件属性。因此,例如,如果itemRenderer中的图像仅显示在父级的给定条件下,则此类内容将完美地运行:

<mx:itemRenderer>
 <mx:Component>
   <mx:Label text="{data}"/>
   <mx:Image id="img" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/>
</mx:Component>
</mx:itemRenderer>

其中外部文档(不是列表,但列表所在的mxml)包含类似

的内容
[Bindable]
public function get ShowImage():void
{
return showImage;
}
public function set ShowImage(val:Boolean):void
{
showImage = val;
}

我试图做同样的事情在Flex 4.5中使用使用不是parentDocument Spark项呈示,但它似乎并没有意识到的结合。当我在Flex 4.5中执行此操作时,itemRenderer在parentDocument ShowImage更改时似乎不知道。

有没有人见过这个问题并且能够提供解决方案?

编辑:添加Spark源 根据要求,这是我的火花源:

MyItemRenderer.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Label id="myLabel" text="{data}/>
<s:Image src="something.png" visible="{parentDocument.ShowImage}" includeInLayout="{parentDocument.ShowImage}"/>
</s:ItemRenderer>

RendererContainer.mxml

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[

private var showImage:Boolean = false;

[Bindable]
public function set ShowImage(val:Boolean):void
{
     showImage = val;
}
public function get ShowImage():Boolean
{
     return showImage;
}
]]>
    </fx:Script>
    <!-- Content Group -->
    <s:List id="lstCell" width="100%" height="100%" itemRenderer="MyItemRenderer">      
    </s:List>
</s:Panel>

确定,所以有在RendererContainer.mxml外的包装,调度是通过改变可绑定布尔处理的自定义事件的复选框。然后,该变量中的更改会更改RendererContainer组件上的ShowImage属性。我希望然后MyItemRenderer可以获取绑定,但它似乎无法正常工作。

所以我的外包装器会像这样访问ShowImage

<comp:RendererContainer id="myId" ShowImage="{myCheckbox.selected}"/>

4 个答案:

答案 0 :(得分:1)

你的getter似乎有返回类型为void。将其更改为布尔值

[Bindable]
public function get ShowImage():Boolean
{
return showImage;
}
public function set ShowImage(val:Boolean):void
{
showImage = val;
}

答案 1 :(得分:1)

我认为这应该适合你,YourTypeHere将是包含的类 对象,确保ShowImage属性是公共的并且可绑定。

<mx:itemRenderer>
     <mx:Component> 
     <mx:Script>
        <![CDATA[ 
            import YourTypeHere;
        ]]>
    </mx:Script>
       <mx:Label text="{data}"/>
       <mx:Image id="img" 
        visible="{YourTypeHere(this.parent.ShowImage)}" 
        includeInLayout="{YourTypeHere(this.parent.ShowImage)}"/>
    </mx:Component>
</mx:itemRenderer>

P.S。请不要用起始大写字母命名属性,包括getter,考虑将其命名为showImage,将私有var命名为_showImage,而不是:D

答案 2 :(得分:1)

这会有所帮助。

<s:Image src="something.png" visible="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}" includeInLayout="{RendererContainer(ListSkin(parentDocument).parentDocument).ShowImage}"/>

答案 3 :(得分:1)

以下作品完美无缺:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <fx:Script>
            <![CDATA[

                private var showImage:Boolean = false;

                [Bindable]
                public function set ShowImage(val:Boolean):void
                {
                    showImage = val;
                }
                public function get ShowImage():Boolean
                {
                    return showImage;
                }
            ]]>
        </fx:Script>
        <s:CheckBox label="Select" change="{ShowImage = !ShowImage}"/>
        <!-- Content Group -->
        <s:List id="lstCell" width="100%" height="100%" dataProvider="{new ArrayCollection(['A','B'])}">
            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                    xmlns:s="library://ns.adobe.com/flex/spark" 
                                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                                    autoDrawBackground="true">
                        <s:layout>
                            <s:HorizontalLayout/>
                        </s:layout>
                        <s:Label id="myLabel" text="{data}"/>
                        <s:Button label="something.png" visible="{outerDocument.ShowImage}" includeInLayout="{outerDocument.ShowImage}"/>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>
        </s:List>
    </s:Panel>

</s:WindowedApplication>