在 Adobe Flex 中创建一列 RadioButtons [英] Creating a column of RadioButtons in Adobe Flex
问题描述
我正在使用 AdvancedDataGrid 小部件，并且我想要两列作为单选按钮，其中每一列都是它自己的 RadioButtonGroup.我以为我拥有所有必要的 mxml，但我遇到了一个奇怪的行为问题.当我上下滚动时，按钮会改变值！选中的按钮变为取消选中状态，未选中的按钮变为选中状态.任何人都有关于这个错误的线索?我是否应该以不同的方式解决这个问题.-- 这是我尝试做的一个精简的例子.
I'm using the AdvancedDataGrid widget and I want two columns to be radio buttons, where each column is it's own RadioButtonGroup. I thought I had all the necessary mxxml, but I'm running into a strange behavior issue. When I scroll up and down, the button change values! The selected button becomes deselected, and unselected ones become selected. Anyone have a clue about this bug? Should I being going about this a different way. -- Here's a stripped down example of what I trying to do.
<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 事件被触发(这很好，因为无论如何我都要从数据库填充网格).
Alright! Go it working. I just had to make a couple of changes from bill's suggestion. Mainly using ArrayCollection with ObjectProxy so it was both bindable and dynamic. One weird thing - I couldn't select a button in the first row if I filled in the array at construction time; I had to delay that until the creationComplete event was fired (which is fine, since I'm going to populate the grid from a db anyway).
<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>
推荐答案
这里发生的事情是 Flex 只为 visible 列创建 itemRenderer 实例.当你滚动时，这些实例会被回收.因此，如果向下滚动，绘制第一行第一列的 RadioButton 对象现在可能已更改为绘制第七行的第一列.每当发生这种情况时，Flex 都会重置 itemRenderer 的数据"属性.
What's happening here is that Flex only creates itemRenderer instances for the visible columns. When you scroll around, those instances get recycled. So if you scroll down, the RadioButton object that was drawing the first column of the first row may now have changed to instead be drawing the first column of the seventh row. Flex resets the "data" property of the itemRenderer whenever this happens.
因此，虽然有 15 行数据，但只有 12 个单选按钮(左"6 个，右"6 个，6 个可见行)，而不是 30 个单选按钮，如您所料.如果您只是显示选择，这不是什么大问题，但是当您允许更新时，问题就更大了.
So while there are 15 rows of data, there are only ever 12 RadioButtons (6 for the "left", and 6 for the "right" for the 6 visible rows), not 30 RadioButtons, as you might expect. This isn't a big problem if you're only displaying the selection, but it becomes more of a problem when you allow updates.
要解决显示问题，您可以将 RadioButton 的selected"属性绑定到 itemRenderer 的 data.left(或 right)值，而不是在列上设置dataField".然后，您需要将 dataProvider 中的项目设为可绑定".
To fix the display issue, instead of setting the "dataField" on the column, you can bind the RadioButton's "selected" property to the itemRenderer's data.left (or right) value. You'll then need to make the items in your dataProvider "Bindable".
要解决更新问题，由于您将直接绑定到 dataProvider 项目值，因此您需要确保更新它们.由于每个项目没有一个 RadioButton，因此您需要另一种方案.在这种情况下，我放入了一个处理程序，该处理程序将每个项目的左/右属性设置为false"，除了selected"一个设置为true".
To fix the update issue, since you'd be binding directly to the dataProvider item values, you need to be sure to update them. Since there's isn't one RadioButton per-item, you'll need another scheme for that. In this case I put in a handler that goes and sets the left/right property of each item to "false", except for the "selected" one, which gets set to "true".
我根据这些想法更新了您的示例代码.尝试这样的事情:
I updated your example code based on these thoughts. Try something like this:
<?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>
这篇关于在 Adobe Flex 中创建一列 RadioButtons的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
