Как выровнять несколько текстовых элементов в столбцы в Flex DropDownList? - PullRequest
Новая
       27

Как выровнять несколько текстовых элементов в столбцы в Flex DropDownList?

0 голосов
/ 02 февраля 2012

Я хочу иметь возможность отображать несколько частей информации во всплывающем окне DropDownList.Информация, которую я хочу отобразить, фактически является парой имя / значение, как показано здесь: 

{
   [
      {"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.

  1. Я хочу, чтобы всплывающее окно изменило свою ширину таким образом, чтобы текст не обрезался или не обрезался.
  2. Я хочу, чтобы имена были выровнены по левому краю с другими именами.
  3. Я хочу значениячтобы быть выровненным по левому краю к другим значениям.

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

enter image description here

Я сделал это с помощью комбинации пользовательского 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 в настраиваемой обложке, как описано в Установка ширины раскрывающегося меню вэлемент управления Spark DropDownList во Flex 4 .

Я почти на месте, но я не могу выровнять все значения вместе в один столбец.Как бы вы достигли этого?

...