Flex Spark DropDownList - 項目間の区切りを追加します。

Question

顧客の過去の状態と可能な状態の両方を表示できるドロップダウンを作成しようとしています。

しかし、過去の状態と可能な状態の間にセパレータを追加したいと思います。

実際には、私はdataproviderに "-----"のような項目を追加します。

しかし、ルックアンドフィールが良くなく、このアイテムが選択されている可能性があります。

私の理想的なアプローチは、そのようなものです：

良く行うために、どのように？

ご意見をお寄せください。

Answer 1

私が考えることができる唯一の方法は、DropDownListのカスタムスキンを作成することです。

私はそのコンポーネントをスキンしていないので、詳細はわかりませんが、Flash Builderを使用している場合、コンポーネントの新しいスキンを作成するのは非常に簡単です。 「スキン」セレクタの右側にあるスキンを作成を選択します。次に、コンポーネントの外観についてすべてをカスタマイズできます。

Answer 2

私はカスタムItemRendererを使用します。最後の項目では、行を非表示にすることができます。ただし、このコードでは、所有者がバインド可能ではないというデータバインディング警告が表示されます。

<s:itemRenderer> 
    <fx:Component> 
     <s:ItemRenderer width="100%" height="100%" 
         autoDrawBackground="true"> 
      <fx:Script> 
       <![CDATA[ 
        import spark.components.supportClasses.ListBase; 
       ]]> 
      </fx:Script> 
      <s:states> 
       <s:State name="normal"/> 
       <s:State name="down"/> 
       <s:State name="hovered"/> 
       <s:State name="selected"/> 
       <s:State name="dragging"/> 
       <s:State name="normalAndShowCaret"/> 
       <s:State name="hoveredAndShowCaret"/> 
       <s:State name="selectedAndShowCaret"/> 
      </s:states> 


      <s:Line width="100%" top="2" visible="{itemIndex==outerDocument.lengthOfFirstItems-1}"> 
       <s:stroke> 
        <s:SolidColorStroke weight="1" caps="square"/> 
       </s:stroke> 
      </s:Line> 

      <s:Group top="8" left="2" right="2" bottom="2" width="100%" height="100%"> 
       <s:Label id="labelDisplay" verticalCenter="1" horizontalCenter="0" /> 
      </s:Group> 
     </s:ItemRenderer> 
    </fx:Component> 
</s:itemRenderer> 

ドキュメントでは、int型のlengthOfFirstItemsという変数を作成します。あなたは2つの配列を持っていると思いますか？ 1つはトップアイテム用、もう1つはボトム用ですか？そうであれば、最初の配列に2番目の配列を追加します（または3番目の配列をすべて作成します）。配列に参加する前に、lengthOfFirstItemsをアイテムの最初のセットの長さに設定します。したがって、画像を使用すると、2つの項目があるので長さが2になる例があります。次に、行、次に残りの項目が表示されます。

// position of end of first array. must be public to be accessible by outerDocument 
public var lengthOfFirstItems:int = -1; 

// get length of first array 
lengthOfFirstItems = firstArray.length; 

この例では、行はアイテムの最初の配列の最後の行に表示されます。コードの一部は擬似コードなので、おそらくコードを調整する必要があります。