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

时间:2013-07-11 09:36:33

标签: extjs4 radio-button

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

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中执行此操作

1 个答案:

答案 0 :(得分:0)

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

<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