Question

我正在构建一个ItemRenderer，以显示公司可能希望在建筑物上执行的作业列表。然后，用户可以单击作业以选择它并在父视图上使用添加/编辑/删除按钮。

如何在我的s：ItemRenderer中突出显示所选的HGroup，以允许用户查看当前选择的作业？

<s:Scroller width="100%" height="70%">
        <s:DataGroup width="100%" height="100%" 
                     horizontalCenter="0" verticalCenter="0" 
                     dataProvider="{Session.EXISTING_JOBS}"
                     >
            <s:layout >
                <s:VerticalLayout />                
            </s:layout>



            <s:itemRenderer>
                <fx:Component>
                    <s:ItemRenderer verticalCenter="0" horizontalCenter="0" width="100%">                                   

                        <fx:Script>
                            <![CDATA[


                                protected function jobSelect_clickHandler(event:MouseEvent):void
                                {
                                    // highlight the HGroup here
                                    if(this.selected == true){
                                        jobRow.setStyle('contentBackgroundColor',0x000000);
                                    } else {
                                        jobRow.setStyle('contentBackgroundColor',0xFFFFFF);
                                    }                                       
                                }
                            ]]>
                        </fx:Script>


                        <s:states>
                            <s:State name="normal"/>                            
                        </s:states>
                        <s:HGroup id="jobRow"
                            width="100%" height="50" 
                                  verticalAlign="middle"
                                  click="jobSelect_clickHandler(event)" >                               
                            <s:Label text="{data.id}" 
                                     width="15%" height="50" 
                                     verticalAlign="middle" 
                                     verticalCenter="0"/>       
                            <s:Label text="{data.company}" 
                                     width="35%" height="50"
                                     verticalAlign="middle"
                                     verticalCenter="0"/>
                            <s:Label text="{data.building}" 
                                     width="35%" height="50" 
                                     verticalAlign="middle"
                                     verticalCenter="0"/>   
                            <s:Label text="{data.assets}"
                                     width="15%" height="50"  
                                     verticalAlign="middle"
                                     verticalCenter="0"/>       
                        </s:HGroup>
                    </s:ItemRenderer>
                </fx:Component>
            </s:itemRenderer>

        </s:DataGroup>
    </s:Scroller>

Answer 1

假设您在列表中使用itemRenderer; List类默认已经这样做了。您可以通过设置selectionColor style。

来更改值

如果您确实想要更改HGroup上的值，可以使用样式contentBackgroundColor。您可以通过访问itemRenderer实例的selected属性来判断当前渲染器是否为选定项。

    protected function selectJob_clickHandler(event:MouseEvent):void
    {
        // highlight the HGroup here
        if(this.selected == true){
          hgroupID.setStyle('contentBackgroundColor',0x000000);
        } else {
          hgroupID.setStyle('contentBackgroundColor',0xFFFFFF);
        }
    }

不要忘记向HGroup添加ID：

<s:HGroup id="hgroupID" 
          width="100%" height="50" 
          verticalAlign="middle"
          click="selectJob_clickHandler(event)" >

Flex Mobile - 突出显示项呈示器中的选定行

1 个答案: