我在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>  <input type="radio" name="{parent.questionId}" value="{optionId}"> {option}</p>'+
//'<p>  <input type="radio" name="{questionId}"> {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中执行此操作
答案 0 :(得分:0)
将您的无线电输出线修改为以下内容:
<p>  <input type="radio" name="{parent.questionId}" id="{parent.questionId}_{optionId}" value="{optionId}"> <label for="{parent.questionId}_{optionId}">{option}</label></p>'+
注意:您要确保“{parent.questionId} _ {optionId}”的ID对于dom是唯一的,因此单击该标签会触发其引用的表单元素的正确默认事件。
有关标签标签的信息,请参见下文: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label