我写了一个扩展dijit的类。树以在每个节点旁边包含一个单选按钮。我正在表单中使用它来显示用户可以从中选择文件夹的文件夹树。这是代码:
define("my/Tree/RadioButton",
['dojo/_base/declare', 'dijit/Tree', 'dijit/form/RadioButton', 'dojo/dom-construct', 'dojo/_base/connect', 'dojo/on', 'dojo/_base/lang'],
function (declare, Tree, RadioButton, domConstruct, connect, on, lang){
var TreeNode = declare(Tree._TreeNode, {
_radiobutton: null,
postCreate: function(){
this._createRadioButton();
this.inherited(arguments);
},
_createRadioButton: function(){
this._radiobutton = new RadioButton({
name: this.tree.name,
value: this.tree.model.store.getIdentity(this.item) + '',
checked: false
});
domConstruct.place(this._radiobutton.domNode, this.iconNode, 'before');
if (this.tree.model.store.hasAttribute(this.item, 'checked')) {
var attrValue = this.tree.model.store.getValue(this.item, 'checked');
if (attrValue === true) {
this._radiobutton.set('checked', true);
}
}
connect.connect(this._radiobutton, 'onClick', this, function(){
// set any checked items as unchecked in the store
this.tree.model.store.fetch({
query: {checked: true},
onItem: lang.hitch(this.tree.model.store, function(item){
console.log('found checked item ' + this.getValue(item, 'name'));
this.setValue(item, 'checked', false);
})
});
// check the one that was clicked on
var radioValue = this._radiobutton.get('value');
this.tree.model.store.setValue(this.item, 'checked', true);
});
}
});
return declare(Tree, {
_createTreeNode: function(/*Object*/ args){
return new TreeNode(args);
}
});
});
问题是,提交表单时,提交的值始终是所选第一个单选按钮的值,即使随后单击了其他单选按钮也是如此。
我可以通过检查 dom 看到选中的单选按钮的值属性具有正确的值。但提交的始终是最初选择的值。
我有一个类似的类,它使用复选框小部件代替,并且工作正常。
根据一些反馈进行编辑 我创建了此类的更简单版本,该版本不会跟踪存储中的 using 属性的检查状态:
define("my/Tree/RadioButton",
['dojo/_base/declare', 'dijit/Tree', 'dijit/form/RadioButton', 'dojo/dom-construct'],
function (declare, Tree, RadioButton, domConstruct){
var TreeNode = declare(Tree._TreeNode, {
_radiobutton: null,
postCreate: function(){
this._createRadioButton();
this.inherited(arguments);
},
_createRadioButton: function(){
this._radiobutton = new RadioButton({
name: this.tree.name,
value: this.tree.model.store.getIdentity(this.item) + '',
checked: false
});
domConstruct.place(this._radiobutton.domNode, this.iconNode, 'before');
}
});
return declare(Tree, {
_createTreeNode: function(/*Object*/ args){
return new TreeNode(args);
}
});
});
但即使这样仍然存在相同的问题 - 无论用户首先单击哪个单选按钮都是将提交的值,无论随后单击了哪些其他按钮。
我设法通过挂接到单选按钮的 onchange 事件来解决此问题。钩子在未选中的单选按钮上显式将 check 设置为 false,这似乎可以解决问题。我不确定为什么需要这样做。
我有这个完全相同的问题。 它曾经在较旧的道场工作。 具体来说,在onClicked
函数期间,所有单选按钮都错误地返回 true "dijit.byId("whatever").checked"
。 如果在 onClicked
函数完成使用 FireBug 控制台后手动检查,则上述属性返回正确的值。 我认为这是一个错误,我只是通过为每个按钮使用不同的onClicked
函数来解决它,如下所示:
<form id="locateForm">
<label for="locate">Locate:</label><br />
<input type="radio" dojoType="dijit.form.RadioButton" name="locate" id="locateAddress" value="Address" checked="checked" onClick="enableLocate1();" />
<label for="locateAddress">Address</label>
<input type="radio" dojoType="dijit.form.RadioButton" name="locate" id="locatePlace" value="Place" onClick="enableLocate2();" />
<label for="locatePlace">Place</label>
</form>