Flex Mobile - 突出顯示項目渲染器中的選定行

我正在構建ItemRenderer以顯示公司可能想要在建築物上執行的作業列表。然後用戶可以點擊一個作業來選擇它並使用父視圖上的添加/編輯/刪除按鈕。Flex Mobile - 突出顯示項目渲染器中的選定行

我該如何突出顯示在我的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>

來源

2012-09-03 Keiran Russell

假設您在列表中使用了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); 
     } 
    }

不要忘了一個ID添加到HGroup：

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

來源

2012-09-03 13:42:42 JeffryHouser

，沒有任何效果。我在設置項目渲染器時是否缺少任何東西？我已經將它移動到同一個mxml文件中，以便更容易操作數據。已更新新代碼。 –

我只需在突出顯示組之前將'selected'設置爲true。有關如何同時取消所有其他選項的想法，所以只能選擇一個？ –

你應該確保你的itemRenderer響應dataChange事件，以便根據列表選擇更新它的狀態。這應該刷新它的狀態，當一個項目被選中，當一個項目沒有被選中。 – JeffryHouser

Flex Mobile - 突出顯示項目渲染器中的選定行

回答

相關問題