在 DataGrid 列中使用单选按钮和单选按钮组（在测验应用程序中）

Question

我在测验应用程序中正确使用多个 RadioButton 组件和 RadioButtonGroup 时遇到了一些问题（当它们通过 DataGridColumn 下的 ItemRenderer 呈现时）。

测验页面显示一个问题以及 4 个可能的答案，这些答案由 RadioButton 组件（与唯一的 RadioButtonGroup 绑定）表示。一个测验通常包含很多选择题。

一切正常，直到我导航到下一个问题并 return 到上一个问题；然后我可以在单选按钮中看到我以前的答案 selection 尽管当我更改我的答案和 select 一个不同的单选按钮时它会保留我的旧 selection 并添加新的，这是完全不合理的（因为 RadioButtonGroup 应该只执行 selection 一个选项）。

这是我定义 DataGridColumn 的方式：

<mx:DataGrid y="141" height="373" dataProvider="{currentQuestion.answers}" id="answersGrid" visible="false"  styleName="NoStyleDataGrid" useRollOver="false" headerHeight="0" width="381" x="461" variableRowHeight="true">           
          <mx:columns>                                
            <mx:DataGridColumn  width="20" dataField="key">
                <mx:itemRenderer>
                      <mx:Component>
                        <mx:Canvas width="100%" height="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off" top="0">
                            <mx:Script>
                                <![CDATA[
                                    import mx.core.Application;
                                ]]>
                            </mx:Script>

                            <mx:RadioButton id="rb" value="{data.number}" selected="{outerDocument.isSelected(data.number,rb)}"  group="{outerDocument.getGroup()}" click="outerDocument.setAnswerState(event,data.number)" width="100%" height="30" x="12" y="0" />                                

                        </mx:Canvas>                                    
                      </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>

我使用以下代码确保每个问题都有自己独特的组来包含 RadioButton 组件（作为答案）：

        public function getGroup():RadioButtonGroup{                
            if(radioGroupMap[currentQuestion.key]!=null){                                       
                return radioGroupMap[currentQuestion.key] as RadioButtonGroup;                                      
            }                               
            radioGroupMap[currentQuestion.key] = new RadioButtonGroup();
            return radioGroupMap[currentQuestion.key] as RadioButtonGroup;
        }

只要我不转到下一个问题并且 return 转到上一个问题，此代码就可以正常工作。

感谢在此问题上的任何帮助。

谢谢！

Answer 1

经过一些研究，似乎在数据网格列上包含 RadioButton 和 RadioButtonGroup 的项目呈现器不是一个好的设计选择。由于性能原因，显然创建了比实际需要更多的项目渲染器，这使得 UI 以不可预测的方式运行。

我改为使用 VBOX，并使用 ActionScript 动态创建 RadioButton 和 RadioButtonGroup。这是一些代码示例：

            function populateAnswers(){
                var rbg:RadioButtonGroup = new RadioButtonGroup();
                for each ( var ans:Answer in currentQuestion.answers){
                    var row:HBox = new HBox();
                    var rb:RadioButton = new RadioButton();
                    rb.group = rbg;
                    rb.id = ""+ans.number;
                    var num:int = ans.number;
                        rb.addEventListener(MouseEvent.CLICK,setAnswerState);
                rb.selected = isSelected(ans.number);                       
                        row.addChild(rb);                       

                    var answerBoby:Text = new Text();
                    answerBoby.enabled = false;
                    answerBoby.styleName = "readOnlyTA";
                    answerBoby.selectable = false;
                    answerBoby.htmlText = ans.body;
                    row.addChild(answerBoby);
                    quizAnswersPanel.addChild(row);                     

                }

在 DataGrid 列中使用单选按钮和单选按钮组（在测验应用程序中）

Using RadioButton with RadioButtonGroup in a DataGridColumn (in a quiz application)

apache-flex

mxml

flex3

actionscript-3