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

时间:2009-09-25 06:24:30

标签: flex3 advanceddatagrid

我使用itemRenderer在advancedDataGrid列中创建单选按钮具有不可预测的行为。类似的问题已在报道 Creating a column of RadioButtons in Adobe Flex。我尝试使用相同的过程,即绑定每个单选按钮selectedValue和value属性与关联bean的属性中指定的属性,但仍然面临问题。

  

按钮更改值!选中   按钮变为取消选择,并且   未经选择的人将被选中。

这是我的advancedDataGrid的代码:

<mx:AdvancedDataGrid id="adDataGrid_rptdata" 
                width="100%" height="100%"
                dragEnabled="false" sortableColumns="false" 
                treeColumn="{action}"
                liveScrolling="false"
                displayItemsExpanded="true" >

                <mx:dataProvider>
                    <mx:HierarchicalData source="{this.competenceCollection}" childrenField="competenceCriteria"/>
                </mx:dataProvider>

                <mx:columns>
                    <mx:AdvancedDataGridColumn headerText="" id="action" dataField="criteriaName" />

                    <mx:AdvancedDataGridColumn headerText="Periode 1" dataField="" width="200">
                        <mx:itemRenderer>
                            <mx:Component>
                                <mx:HBox horizontalAlign="center" width="100%" verticalAlign="middle">                                  
                                    <mx:RadioButton name="period1" value="{data}" selected="{data.period1}" group="{data.radioBtnGrpArray[0]}" visible="{data.showRadioButton}" />
                                </mx:HBox>
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:AdvancedDataGridColumn>

                    <mx:AdvancedDataGridColumn headerText="Periode 2" dataField="" width="200">
                        <mx:itemRenderer>
                            <mx:Component>
                                <mx:HBox horizontalAlign="center" width="100%" verticalAlign="middle">                                  
                                    <mx:RadioButton name="period2" value="{data}" selected="{data.period2}" group="{data.radioBtnGrpArray[1]}" visible="{data.showRadioButton}" />
                                </mx:HBox>
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:AdvancedDataGridColumn>

                    <mx:AdvancedDataGridColumn headerText="Periode 3" dataField="" width="200">
                        <mx:itemRenderer>
                            <mx:Component>
                                <mx:HBox horizontalAlign="center" width="100%" verticalAlign="middle">                                  
                                    <mx:RadioButton name="period3" value="{data}" selected="{data.period3}" group="{data.radioBtnGrpArray[2]}" visible="{data.showRadioButton}" />
                                </mx:HBox>
                            </mx:Component>
                        </mx:itemRenderer>
                    </mx:AdvancedDataGridColumn>
                </mx:columns>
            </mx:AdvancedDataGrid>

在这方面,任何工作都受到高度赞赏!

1 个答案:

答案 0 :(得分:0)

  

取消选择所选按钮,并选择未选择的按钮。

仅针对用户手动更改selected状态的单选按钮是否会出现此问题?在这种情况下,因为当重用selected时,flex会根据声明中提到的值重置其RadioButton状态。因此,即使您选择/取消选择Periode 1列中的比率按钮,当您向外滚动并返回时,flex会将其重置为{data.period1}。使列可编辑以将修改保存回数据提供程序可能会起作用。尝试将列声明更改为:

<mx:AdvancedDataGridColumn headerText="Periode 1" dataField="" width="200" 
     editable="true" rendererIsEditor="true" editorDataField="selected">

编辑:尝试此操作 - 尝试在选择单选按钮时更改数据提供程序。从内存中编写但未经过测试的代码 - 可能包含错误。

<mx:AdvancedDataGridColumn headerText="Periode 1" dataField="" width="200">
  <mx:itemRenderer>
    <mx:Component>
      <mx:HBox horizontalAlign="center" width="100%"
        verticalAlign="middle">
        <mx:RadioButton id="rb" name="period1" value="{data}" 
          selected="{data.period1}" 
          group="{data.radioBtnGrpArray[0]}" visible="{data.showRadioButton}" 
          change="outerDocument.handleRadio1(this);"/>
      </mx:HBox>
    </mx:Component>
  </mx:itemRenderer>
</mx:AdvancedDataGridColumn>
//in a script tag outside the datagrid.
public function handleRadio1(renderer:IListItemRenderer):void
{
  var index:Number = adDataGrid_rptdata.itemRendererToIndex(renderer);
  this.competenceCollection[i].period1 = renderer.rb.selected;
}