Flex：模拟单击数据网格的项目渲染器内的按钮

Question

我正在使用带有项目渲染器的数据网格，它创建了一个切换按钮。 这个想法是有一个项目列表，并且只允许选择一个并在开始时预先选择一个。

我已经让单个按钮选择工作，这意味着当我点击切换按钮时，其他按钮被取消选择。

我的问题是创建一种方法来预先选择数据网格的元素或模拟点击一行并选择相应的切换按钮。

如果我使用 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>

解决方案：

使用数据数组将信息传递到切换按钮。将一个值设置为“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;
 }

Answer 1

在您的GridItemRenderer 中，您应该覆盖data 的设置器。您的数据将包含一个变量，该变量定义了ToggleButton 的选择。在设置器中，您将能够基于此变量切换按钮。

要只选择一个按钮，您可以在渲染器中使用静态变量来存储选定的 itemrenderer。这个更简单但不是很干净，因为它是数据问题，而不是渲染器。因此，您可以从更高级别侦听 dataProvider 中的任何更改，并确保仅选择了一项。