在Adobe Flex中创建一个RadioButton列 [英] Creating a column of RadioButtons in Adobe Flex

问题描述

我正在使用AdvancedDataGrid小部件，我希望两列是单选按钮，每列都是自己的RadioButtonGroup。我以为我有所有必要的mxxml，但我遇到了一个奇怪的行为问题。当我上下滚动，按钮更改值！所选按钮变为取消选择，并且未被选择的按钮被选择。任何人都有关于这个错误的线索？我是否应该以不同的方式来讨论这个问题。
$ b

 < mx：WindowedApplication xmlns：mx =http： //www.adobe.com/2006/mxmllayout =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 =150width =400
 sortExpertMode =true 
 selectable =false> 
< mx：columns> 
< mx：AdvancedDataGridColumn 
 headerText =Lwidth =25paddingLeft =6
 dataField =leftsortable =false> 
< mx：itemRenderer> 
< mx：Component> 
< mx：RadioButton groupName =leftAxisGrp/> 
< / mx：Component> 
< / mx：itemRenderer> 
< / mx：AdvancedDataGridColumn> 
< mx：AdvancedDataGridColumn 
 headerText =Rwidth =25paddingLeft =6
 dataField =rightsortable =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 =falseright =falsename =Reddish-grey Mouse Lemur/> 
  < mx：Object left =falseright =falsename =Sambirano Mouse Lemur/> 
< mx：Object left =falseright =falsename =Simmons'Mouse Lemur/> 
 < mx：Object left =falseright =falsename =Brown Mouse Lemur/> 
< mx：Object left =falseright =falsename =Berthe夫人的狐猴/> 
< mx：Object left =falseright =falsename =Goodman's Mouse Lemur/> 
< mx：Object left =falseright =falsename =Jolly's Mouse Lemur/> 
 < mx：Object left =falseright =falsename =Claire's Mouse Lemur/> 
   < / mx：Array> 
< / mx：dataProvider> 
< / mx：AdvancedDataGrid> 
< / mx：WindowedApplication> 
  

---

UPDATED 帐单！）

好的！去工作。我只是从法案的建议中做了一些改变。主要与ObjectProxy一起使用ArrayCollection，所以它既是可绑定的又是动态的。一个奇怪的事情 - 如果我在施工时填入数组，我无法在第一行中选择一个按钮;我不得不拖延，直到creationComplete事件被触发（这是好的，因为我要从一个数据库填充网格）。

 < mx：WindowedApplication xmlns：mx =http://www.adobe.com/2006/mxmllayout =absolute> 
< mx：Script> 
<！[CDATA [
 import mx.utils.ObjectProxy; 
导入mx.collections.ArrayCollection; 
 
 [Bindable] 
 private var myData：ArrayCollection = new ArrayCollection（）; 
 
 private函数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 =150width =400
 selectable =false> 
< mx：columns> 
< mx：AdvancedDataGridColumn id =leftCol
 headerText =Lwidth =25paddingLeft =6sortable =false> 
< mx：itemRenderer> 
< mx：Component> 
< mx：RadioButton groupName =leftAxisGrp
 buttonMode =truevalue ={data}selected ={data.left}/> 
< / mx：Component> 
< / mx：itemRenderer> 
< / mx：AdvancedDataGridColumn> 
< mx：AdvancedDataGridColumn id =rightCol
 headerText =Rwidth =25paddingLeft =6sortable =false> 
< mx：itemRenderer> 
< mx：Component> 
< mx：RadioButton groupName =rightAxisGrp
 buttonMode =truevalue ={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-grey 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> 
  

解决方案

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

因此，当有15行数据时，只有12个RadioButton（6 ，6为6右侧的可见行），而不是30个单选按钮，如你所料。如果您只是显示选择内容，这不是一个大问题，但是当您允许更新时，这会变成更多问题。

要解决显示问题，而不是在列上设置dataField，可以将RadioButton的selected属性绑定到itemRenderer的data.left（或right）值。然后，您需要在dataProviderBindable中创建项目。

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

我基于这些想法更新了示例代码。试试像这样：

 <？xml version =1.0encoding =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 =150width =400
 sortExpertMode =true 
 selectable =false
 dataProvider ={adgData.object}> 
< mx：columns> 
< mx：AdvancedDataGridColumn 
 headerText =Lwidth =25paddingLeft =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 =Rwidth =25paddingLeft =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>