禁用列表选择但保留子功能

时间:2011-04-30 12:55:00

标签: flash flex flex4 flash-builder

我有一个带有dataprovider和自定义itemrenderer的s:List。现在我的itemrenderer里面有一个按钮。 每当我从列表中选择一个项目时,我会专注于该项目,但单击该项目中的按钮只会导致s:List选择该项目,并且不会让我按下该项目中的按钮。

是否有任何解决方案可以禁用“列表”选择功能但保持列表中的项目启用/可点击?

根据要求,这里是代码(相关部分)

CategoryTree.mxml

<s:List id="data1" name="D1" x="-2000" height="100%" minWidth="600"
    width="{this.width}" dataProvider="{this.childrenResult1.lastResult}"
    itemRenderer="gui.components.Category">
    <s:layout>
        <s:VerticalLayout gap="10" clipAndEnableScrolling="true"
            variableRowHeight="true"></s:VerticalLayout>
    </s:layout>
</s:List>

Category.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"
    xmlns:ns="customNS" width="100%" minHeight="200" height="100%"
    maxHeight="410" autoDrawBackground="false" creationComplete="init()"
    updateComplete="update()">
    <s:layout>
        <s:HorizontalLayout gap="5" variableColumnWidth="true" />
    </s:layout>
    <s:Group height="100%" width="30">
        <s:BorderContainer depth="0" backgroundAlpha="0.1"
            backgroundAlpha.hovered="0.2" backgroundAlpha.selected="0.4"
            borderVisible="false" height="100%" width="20" buttonMode="true"
            useHandCursor="true" click="{this.previousCategory()}"
            horizontalCenter="0" />
        <ns:BackBtn depth="1" height="30" width="30" useHandCursor="true"
            buttonMode="true" click="{this.previousCategory()}" alpha="0.5"
            alpha.hovered="1" />
    </s:Group>
    <s:HGroup width="100%" height="100%" gap="10">
        <s:Label height="100%" maxHeight="100" maxDisplayedLines="-1"
            fontSize="20" rotation="-90" text="{data.name}" backgroundAlpha="0.6"
            backgroundColor="#6D6D6D" />
        <s:List id="category" height="100%" width="100%"
            itemRenderer="gui.components.ArticleSmall" 
            dataProvider="{this.articles}">
            <s:layout>
                <s:TileLayout clipAndEnableScrolling="false"
                    verticalGap="2" horizontalGap="5" 
                    columnAlign="justifyUsingGap"
                    rowAlign="top" verticalAlign="middle" />
            </s:layout>
        </s:List>
    </s:HGroup>
    <s:Group height="100%" width="30">
        <s:BorderContainer backgroundAlpha="0.1"
            backgroundAlpha.hovered="0.2" backgroundAlpha.selected="0.4"
            borderVisible="false" height="100%" width="20" buttonMode="true"
            useHandCursor="true" click="{this.nextCategory()}" 
            horizontalCenter="0" />
        <ns:BackBtn rotation="180" depth="1" height="30" width="30"
            useHandCursor="true" buttonMode="true" click="{this.nextCategory()}"
            alpha="0.5" alpha.hovered="1" />
    </s:Group>
</s:ItemRenderer>

Article.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"
    width="200" height="200" autoDrawBackground="false" depth="0"
    depth.hovered="1" creationComplete="init()">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:BorderContainer useHandCursor="true"
        backgroundAlpha="0" borderVisible="true" width="150" height="150"
        left="0" top="0" borderWeight="2">
        <mx:Image top="12.5" id="article_image" source="assets/dummy.png"
            autoLoad="true" width="100%" height="100%" x="0" scaleContent="true" />
        <mx:Text height="70%" width="100%" left="0.5" top="0.5" right="0.5"
            color="#000000" fontSize="10" text="{data.name}" />
        <mx:Text height="15" width="35%" bottom="0.5" left="0.5"
            color="#000000" fontSize="10" text="{data.prices.price() + '€'}" />
        <s:BorderContainer includeIn="hovered" x="0" y="0"
            width="146" height="146" borderVisible="false" backgroundAlpha="0.2"
            backgroundColor="#FFFFFF">
            <s:Button id="btn_add" height="25" width="25" label="Button"
                click="btn_add_clickHandler(event)" skinClass="gui.skins.CartAdd"
                bottom="2" right="29" />
            <s:Button id="btn_del" height="25" width="25" label="Button"
                click="btn_del_clickHandler(event)" skinClass="gui.skins.CartDel"
                bottom="2" right="2" />
        </s:BorderContainer>
    </s:BorderContainer>
</s:ItemRenderer>

单击文章ItemRenderer中的按钮元素时会发生错误。应用程序从Categoy.mxml列表中选择“article”-item,而不是单击按钮。

1 个答案:

答案 0 :(得分:1)

你需要它作为一个列表吗?它可以只是一个数据组吗? List和DataGroup之间的主要区别在于List具有可选择的项。如果您只是更改代码以使用DataGroup,您仍然可以获得项目渲染器,但是可选性不足。

这样做你需要的吗?