Flex Mobile - Highlight Selected Row in Item Renderer

Question

Я создаю ItemRenderer, чтобы отобразить список рабочих мест, которые компания может захотеть выполнить в здании. Затем пользователь может щелкнуть по заданию, чтобы выбрать его, и использовать кнопки добавления/редактирования/удаления в родительском представлении.

Как бы выделить выбранную HGroup в моем s: ItemRenderer, чтобы пользователь мог видеть, какое задание выбрано в данный момент?

<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. Вы можете указать, является ли ваш текущий рендерер выбранным элементом или нет, обратившись к свойству selected экземпляра itemRenderer.

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:

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