Question

我正在使用AdvancedDataGrid小部件，我希望两列成为单选按钮，其中每列都是它自己的RadioButtonGroup。我以为我有所有必要的mxxml，但我遇到了一个奇怪的行为问题。当我向上和向下滚动时，按钮会改变值！取消选择所选按钮，并选择未选择的按钮。任何人都有关于这个bug的线索？我应该以不同的方式解决这个问题。 - 这是我试图做的一个精简的例子。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:RadioButtonGroup id="leftAxisGrp" />
  <mx:RadioButtonGroup id="rightAxisGrp">
    <mx:change>
      <![CDATA[
        trace (rightAxisGrp.selection);
        trace (rightAxisGrp.selection.data.name);
      ]]>
    </mx:change>
  </mx:RadioButtonGroup>
  <mx:AdvancedDataGrid
      id="readingsGrid"
      designViewDataType="flat"
      height="150" width="400"
      sortExpertMode="true"
      selectable="false">
    <mx:columns>
      <mx:AdvancedDataGridColumn
          headerText="L" width="25" paddingLeft="6"
          dataField="left" sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="leftAxisGrp" />
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn
          headerText="R" width="25" paddingLeft="6"
          dataField="right" sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="rightAxisGrp" />
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn headerText="" dataField="name" />
    </mx:columns>
    <mx:dataProvider>
      <mx:Array>
        <mx:Object left="false" right="false" name="Reddish-gray Mouse Lemur" />
        <mx:Object left="false" right="false" name="Golden-brown Mouse Lemur" />
        <mx:Object left="false" right="false" name="Northern Rufous Mouse Lemur" />
        <mx:Object left="false" right="false" name="Sambirano Mouse Lemur" />
        <mx:Object left="false" right="false" name="Simmons' Mouse Lemur" />
        <mx:Object left="false" right="false" name="Pygmy Mouse Lemur" />
        <mx:Object left="false" right="false" name="Brown Mouse Lemur" />
        <mx:Object left="false" right="false" name="Madame Berthe's Mouse Lemur" />
        <mx:Object left="false" right="false" name="Goodman's Mouse Lemur" />
        <mx:Object left="false" right="false" name="Jolly's Mouse Lemur" />
        <mx:Object left="false" right="false" name="Mittermeier's Mouse Lemur" />
        <mx:Object left="false" right="false" name="Claire's Mouse Lemur" />
        <mx:Object left="false" right="false" name="Danfoss' Mouse Lemur" />
        <mx:Object left="false" right="false" name="Lokobe Mouse Lemur" />
        <mx:Object left="true" right="true" name="Bongolava Mouse Lemur" />
      </mx:Array>
    </mx:dataProvider>
  </mx:AdvancedDataGrid>
</mx:WindowedApplication>

更新（谢谢账单！）

好的！去吧。我只是不得不从比尔的建议中做出一些改变。主要使用ArrayCollection和ObjectProxy，因此它既可绑定又可动态。一个奇怪的事情 - 如果我在施工时填写数组，我无法在第一行中选择一个按钮;我不得不推迟，直到creationComplete事件被触发（这很好，因为我打算从db填充网格）。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Script>
    <![CDATA[
      import mx.utils.ObjectProxy;
      import mx.collections.ArrayCollection;

      [Bindable]
      private var myData:ArrayCollection = new ArrayCollection ();

      private function selectItem (selObject:Object, property:String) : void
      {
        for each (var obj:ObjectProxy in myData) {
          obj[property] = (obj.name === selObject.name);
        }
        readingsGrid.invalidateDisplayList ();
      }
    ]]>
  </mx:Script>
  <mx:RadioButtonGroup id="leftAxisGrp">
    <mx:change>
      <![CDATA[
        selectItem (leftAxisGrp.selectedValue, 'left');
      ]]>
    </mx:change>
  </mx:RadioButtonGroup>
  <mx:RadioButtonGroup id="rightAxisGrp">
    <mx:change>
      <![CDATA[
        selectItem (rightAxisGrp.selectedValue, 'right');
      ]]>
    </mx:change>
  </mx:RadioButtonGroup>
  <mx:AdvancedDataGrid
      id="readingsGrid"
      designViewDataType="flat"
      dataProvider="{myData}"
      sortExpertMode="true"
      height="150" width="400"
      selectable="false">
    <mx:columns>
      <mx:AdvancedDataGridColumn id="leftCol"
          headerText="L" width="25" paddingLeft="6" sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="leftAxisGrp"
                buttonMode="true" value="{data}" selected="{data.left}" />
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn id="rightCol"
          headerText="R" width="25" paddingLeft="6" sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="rightAxisGrp"
                buttonMode="true" value="{data}" selected="{data.right}" />
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn headerText="" dataField="name" />
    </mx:columns>
    <mx:creationComplete>
      <![CDATA[
      myData.addItem(new ObjectProxy ({ left:true, right:true, name:"Golden-brown Mouse Lemur" }));
      myData.addItem(new ObjectProxy ({ left:false, right:false, name:"Reddish-gray Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Northern Rufous Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Sambirano Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Simmons' Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Pygmy Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Brown Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Madame Berthe's Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Goodman's Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Jolly's Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Mittermeier's Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Claire's Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Danfoss' Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Lokobe Mouse Lemur" }));
      myData.addItem(   new ObjectProxy ({ left:false, right:false, name:"Bongolava Mouse Lemur" }));               
      ]]>
    </mx:creationComplete>
  </mx:AdvancedDataGrid>
</mx:WindowedApplication>

Answer 1

这里发生的是Flex仅为可见列创建itemRenderer实例。滚动时，这些实例会被回收。因此，如果向下滚动，则绘制第一行第一列的RadioButton对象现在可能已更改为绘制第七行的第一列。只要发生这种情况，Flex就会重置itemRenderer的“data”属性。

因此，虽然有15行数据，但是只有12个RadioButton（6个用于“left”，6个用于6个可见行的“right”），而不是30个RadioButton，正如您所料。如果您只是显示选择，这不是一个大问题，但是当您允许更新时，它会变得更加严重。

要修复显示问题，可以将RadioButton的“selected”属性绑定到itemRenderer的data.left（或右）值，而不是在列上设置“dataField”。然后，您需要将dataProvider中的项目设为“Bindable”。

要修复更新问题，由于您要直接绑定到dataProvider项值，因此需要确保更新它们。由于每个项目没有一个RadioButton，你需要另一个方案。在这种情况下，我放入一个处理程序，将每个项目的左/右属性设置为“false”，但“selected”属性除外，它被设置为“true”。

我根据这些想法更新了您的示例代码。尝试这样的事情：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application  layout="absolute"
    xmlns:my="*"
    xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:RadioButtonGroup id="leftAxisGrp"
       change="selectItem(leftAxisGrp.selectedValue, 'left');"/>
  <mx:RadioButtonGroup id="rightAxisGrp"
       change="selectItem(rightAxisGrp.selectedValue, 'right');">
  </mx:RadioButtonGroup>
  <mx:AdvancedDataGrid
      id="readingsGrid"
      designViewDataType="flat"
      height="150" width="400"
      sortExpertMode="true"
      selectable="false"
      dataProvider="{adgData.object}">
    <mx:columns>
      <mx:AdvancedDataGridColumn
          headerText="L" width="25" paddingLeft="6"
          sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="leftAxisGrp" 
                value="{data}" selected="{data.left}"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn
          headerText="R" width="25" paddingLeft="6"
          sortable="false">
        <mx:itemRenderer>
          <mx:Component>
            <mx:RadioButton groupName="rightAxisGrp"
                value="{data}" selected="{data.right}"/>
          </mx:Component>
        </mx:itemRenderer>
      </mx:AdvancedDataGridColumn>
      <mx:AdvancedDataGridColumn headerText="" dataField="name" />
    </mx:columns>
  </mx:AdvancedDataGrid>
  <mx:Model id="adgData">
      <root>
        <object left="false" right="false" name="Reddish-gray Mouse Lemur" />
        <object left="false" right="false" name="Golden-brown Mouse Lemur" />
        <object left="false" right="false" name="Northern Rufous Mouse Lemur" />
        <object left="false" right="false" name="Sambirano Mouse Lemur" />
        <object left="false" right="false" name="Simmons' Mouse Lemur" />
        <object left="false" right="false" name="Pygmy Mouse Lemur" />
        <object left="false" right="false" name="Brown Mouse Lemur" />
        <object left="false" right="false" name="Madame Berthe's Mouse Lemur" />
        <object left="false" right="false" name="Goodman's Mouse Lemur" />
        <object left="false" right="false" name="Jolly's Mouse Lemur" />
        <object left="false" right="false" name="Mittermeier's Mouse Lemur" />
        <object left="false" right="false" name="Claire's Mouse Lemur" />
        <object left="false" right="false" name="Danfoss' Mouse Lemur" />
        <object left="false" right="false" name="Lokobe Mouse Lemur" />
        <object left="true" right="true" name="Bongolava Mouse Lemur" />
      </root>
  </mx:Model>
  <mx:Script>
    <![CDATA[
        private function selectItem(selObject:Object, property:String) : void {
            for each(var obj:Object in adgData.object) {
                obj[property] = (obj === selObject);
            }
            readingsGrid.invalidateDisplayList();
        }
    ]]>
  </mx:Script>
</mx:Application>

Answer 2

转载这个。可能是一个ADG错误，我们在这里遇到了一些问题。（没有在bugs.adobe.com上找到这个，但他们的搜索很糟糕。）

您可以尝试使用Flex 3.0.3，或者每晚构建here（警告，可能会非常破坏），看看他们是否已修复它，或者您可以尝试实现自定义渲染器，但这是为了正确而痛苦。

在Adobe Flex中创建一组单选按钮

2 个答案: