在Adobe中创建RadioButtons列

Question

我使用的是AdvancedDataGrid小部件，我希望两个列是单选按钮，其中每个列都是自己的RadioButtonGroup。我以为我拥有所有必需的mxxml，但我遇到了一个奇怪的行为问题。当我上下滚动时，按钮会改变值！选中的按钮被取消选中，未选中的按钮被选中。有人知道这只虫子的线索吗？我应该换一种方式来做这件事。--这是我试图做的一个简单的例子.

<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事件(这很好，因为我无论如何都要从数据库中填充网格)。

<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行(6 RadioButtons表示“左”，6表示“右”表示6行可见数据)，而不是如您所预期的那样，只有30 RadioButtons。如果只显示所选内容，这不是什么大问题，但当您允许更新时，问题就更大了。

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

要解决更新问题，因为您将直接绑定到dataProvider项值，因此需要确保更新它们。由于每个项目没有一个RadioButton，因此您需要另一个方案。在本例中，我添加了一个处理程序，该处理程序将每个项的左/右属性设置为"false"，但被设置为"true“的"selected”属性除外。

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

<?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，或者每晚构建一个这里 (警告，可能已经坏了)，看看它们是否修复了它，或者您可以尝试实现一个自定义呈现器，但这是一件很痛苦的事情。