extjs4 - 在 extjs4 中如何在单击其值时选择 tpl 的单选按钮

Question

我在 extjs4 工作。我有 tpl 视图通过单选按钮显示问题及其选项 -

Ext.define('Balaee.view.qb.qbqns.QbqnsView',
{
        extend:'Ext.view.View',
        id:'qbqnsViewId',
        alias:'widget.QbqnsView',
        store:'qb.QbqnsStore',
        cls:'QbqnsView',

        //autoScroll: true,
        config:
        {
            tpl:'<tpl for=".">'+
                '<div id="main">'+
                '</br>'+
                    '<b><id="q">{#}.{question}</b>'+
                    '<tpl for="options">'+     // interrogate the kids property within the data
                    '<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" value="{optionId}">&nbsp{option}</p>'+
                    //'<p>&nbsp&nbsp<input type="radio" name="{questionId}">&nbsp{option}</p>'+
                    '</tpl></p>'+
                   // '<p>---------------------------------------------------------</p>'+
                '</div>'+
                '</tpl>',
            itemSelector:'div.main' 
        }
});

要检索选定的单选按钮，我将代码编写为-

var QbqnsStore = this.getStore('qb.QbqnsStore');
var QbqnsModel = this.getModel('qb.QbqnsModel');
QbqnsModel = QbqnsStore.getAt(0);


var answers = '{"data":[';
var i = 0;
QbqnsStore.each(function (model) {
    i++;
    var inputs = document.getElementsByName(model.get('questionId'));

    for (var j = 0; j < inputs.length; j++) {
        if (inputs[j].checked) {    
            answers = answers + '{"paperId":"' + paperNumber + '","userId":"' + userId + '","questionId":"' + inputs[j].name + '","option":' + inputs[j].value + '},'
        }
    }
}); 

所以它工作正常。但是用户需要单击单选按钮来选择它。我想以这样的方式制作功能，即使用户单击单选按钮值，它也应该被选中。那么如何在 extjs4 中执行此操作

Answer 1

将您的无线电输出线修改为以下内容：

<p>&nbsp&nbsp<input type="radio" name="{parent.questionId}" id="{parent.questionId}_{optionId}" value="{optionId}">&nbsp<label for="{parent.questionId}_{optionId}">{option}</label></p>'+

注意：您要确保“{parent.questionId}_{optionId}”的 id 对于 dom 是唯一的，因此单击标签会触发其引用的表单元素的正确默认事件。

有关标签标签的信息，请参见下文： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/label