Flex: имитация нажатия на кнопку внутри средства визуализации элементов сетки данных - PullRequest
Новая
       34

Flex: имитация нажатия на кнопку внутри средства визуализации элементов сетки данных

0 голосов
/ 22 ноября 2011

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

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

Моя задача - создать способ предварительного выбора элемента сетки данных или смоделировать щелчок по строке и выбрать соответствующую кнопку переключения.

Если я использую datagrid.selectedIndex, результатом будет выделение, но кнопка переключения не будет выделена.

Вот пример кода

В этом примере Я использую значение массива "selected", чтобы определить выбранную кнопку , не мое любимое решение, а то, которое сработало первым.

Коллекция массивов: 

public static const ValuesList : ArrayCollection = new ArrayCollection(
    [
    {ID:0, Name:"One", selected:false},
    {ID:1, Name:"Two",       selected:false},
    {ID:2, Name:"Three",         selected:false},
    {ID:3, Name:"Four",  selected:false}
    ]
);

Сетка данных: 

<s:DataGrid id="dataGrid" dataProvider={ValuesList} >
 <s:columns>
    <s:ArrayList>
        <s:GridColumn id="GridCol0" />
        <s:GridColumn id="GridCol1" />
        <s:GridColumn id="GridCol2" itemRenderer = "detail_ItemRenderer" />
    </s:ArrayList>
 </s:columns>
</s:DataGrid>

Средство визуализации элементов столбца: 

<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark" 
                    xmlns:mx="library://ns.adobe.com/flex/mx" 
                    clipAndEnableScrolling="true">

  <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        /**
         * Creatioon complete event handler to set toggle button content value.
         * */
        protected function MyToggleButton_creationCompleteHandler(event:FlexEvent) : void
        {
            MyListToggleButton.label = data.Name;
            MyToggleButton.selected = data.selected;
        }

        /**
         * One of the only function that are called on item interaction.
         * */
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            MyToggleButton.selected = data.selected;
        }
    ]]>
</fx:Script>

<s:ToggleButton id="MyToggleButton" width="100%" height="100%"
                creationComplete="MyToggleButton_creationCompleteHandler(event)" />

</s:GridItemRenderer>

РЕШЕНИЕ:

Использование массива данных для передачи информации в кнопку Toggle. Установка одного значения в «true» отобразит выбранный элемент.

Для обеспечения целостности данных советую установить для выбранного индекса сетки соответствующий индекс значения, установленного в «true»: 

public function SetSelectedIndexByName() : int
{
for (var i : int=0; i < dataGrid.dataProvider.length ; i++)
{
    if (dataGrid.dataProvider[i].toString().toUpperCase() == "TRUE")
    {
        return i;
    }
}
return -1;
 }

1 Ответ

1 голос
/ 23 ноября 2011

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

Чтобы выбрать только одну кнопку, вы можете использовать статическую переменную в вашем рендерере, которая хранит выбранный элемент рендерера. Это проще, но не совсем чисто, поскольку речь идет о данных, а не о средствах визуализации. Поэтому вы можете прослушать любое изменение в dataProvider с более высокого уровня и убедиться, что выбран только один элемент.

...