如何将多个文本元素与Flex DropDownList中的列对齐？

Question

我希望能够在DropDownList的PopUp中显示多条信息。我想要显示的信息实际上是一个名称/值对，如下所示：

{
   [
      {"name": "State Soil Geographic", "value": "Spool-Rock outcrop-Jawbone-Hawsley (s812)"},
      {"name": "State Soil Geographic", "value": "Rock outcrop-Monache-Blasmountain (s1070)"},
      {"name": "State Soil Geographic", "value": "Whitewolf-Lucerne-Cuyama (s763)"},
      {"name": "Counties", "value": "Inyo County"},
      {"name": "Counties", "value": "Kern County"},
      {"name": "Counties", "value": "Tulare County"}
   ]
}

显示此信息时，我想将几​​个约束应用于DropDownList PopUp。

1. 我希望PopUp调整其宽度，以免文本被截断或截断。
2. 我希望名称与其他名称保持一致。
3. 我希望这些值与其他值保持一致。

你可以在下面的图片中看到我已经接近实现这一点，但价值观的左对齐暗示了我。红色框中的值应该向左移动，以与蓝色框中的值对齐。



我通过自定义ItemRenderer和CustomSkin的组合实现了这一点。

自定义渲染器提供两个标签来模仿列;一个用于名称，一个用于值。以下是自定义ItemRenderer的代码。

<s:DropDownList width="200" dataProvider="{identifyResults}" labelField="value" skinClass="skins.CustomDropDownListSkin">
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:Group verticalCenter="0" left="2" right="2" top="2" bottom="2">
                    <s:layout>
                        <s:HorizontalLayout variableColumnWidth="true"/>
                    </s:layout>
                    <s:Label text="{data.name}"/>
                    <s:Label text="{data.value}"/>
                </s:Group>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>    
</s:DropDownList>

要允许PopUp更改宽度，我将自定义外观中的popUpWidthMatchesAnchorWidth属性设置为false，如Setting the width of the dropdown menu on a Spark DropDownList control in Flex 4所述。

我几乎在那里，但我似乎无法将所有值组合成一列。你将如何实现这一目标？