PDA

View Full Version : How to unselect a radio node?



robertdbuckley
30 Mar 2012, 12:40 AM
I have a treenode with a check box and a radio button on the same node. This gives the node the property of being "visible" with the checkbox and "active" with radio button.

When the check box is UNCHECKED (ie not visible), I would like the radio button to also be forced to be also UNCHECKED (ie inactive). Thus the checkbox may be checked with the radio button unchecked, but the radio button is not allowed to be checked if the check box is NOT checked...in other words an invisible node cannot be active, but a visible node can be active OR inactive.

It is the tree node of an interactive map which gives the user the opportunity to make a map layer visible in the map and also "active" (radio button =checked) or not active(radio button =unchecked)...but a layer which is not displayed CANNOT be active.

My problem is that I cannot find out how to "uncheck" a radio node.

the code here checks the checkbox when the radio button is checked.


plugins: [
new GeoExt.plugins.TreeNodeRadioButton({
listeners: { // listener for the radiotreenode
"radiochange": function(node) {
//alert(node.text + " is now the active layer.");
activeNode = node;
if(activeNode == node)
{activeNode.select.defer(100, node);
featureInfo.activate();
selLayer = node.layer;
featureInfo.layers = [selLayer];
// this sets the checkbox to checked when the radio button is checked!!
node.layer.setVisibility(true);
}
else
{
featureInfo.deactivate();

}
}
}
})
],


This code checks the check box. I want to set the radio button to checked here.!!!


listeners: { // listener for the treenode checkbox
'checkchange': function(node, checked) {
if (checked === false) {

node.ui.checkbox.attr("checked" , false ); //ERROR How do i uncheck the radio button!!!??!!

}
},


can anyone say how to do this?

thanks for any tips,

Rob

willigogs
30 Mar 2012, 1:40 AM
Check the Radio:

checkbox.setValue(true);

Uncheck the Radio:

checkbox.setValue(false);

robertdbuckley
30 Mar 2012, 2:12 AM
not that easy im afraid..

node.checkbox.setValue(false);
Cannot call method 'setValue' of undefined


node.ui.checkbox.setValue(false);
Uncaught TypeError: Object #<HTMLInputElement> has no method 'setValue'

willigogs
30 Mar 2012, 2:28 AM
That certainly works if you apply it against an Ext element.

I've not used this plugin, so not sure exactly what type of element the "node.ui.checkbox" is?

In your error, it seems as though the element you are trying to perform "setValue" on is undefined. Have you tried console.logging the node.checkbox first to ensure you're actually attempting this against a captured element?

I did notice in your original code you were stating "node.ui.checkbox", yet in your recent post you simply put "node.checkbox"?

EDIT: I notice in your second error it is returning an <HTMLInputElement> and not an EXT element, therefore the setValue method will not work.

I believe you will instead simply have to do:

node.ui.checkbox.checked = false;

Untested though.

robertdbuckley
30 Mar 2012, 2:45 AM
here is the demo project
(http://maps.zgb.de/geoportal/geoportal4.html)http://maps.zgb.de/geoportal/geoportal4.html

I tried both "node.ui.checkbox" and "node.checkbox" out of curiosity.

var radio = document.getElementById('foo');
alert(radio.type);

this returns "radio"...so I can get the type of the element....but when trying radio.setValue(false) i always get

has no method 'setValue'

???


the plugin appends the radio but with the following code...



onRenderNode: function(node) {
var a = node.attributes;
if(a.radioGroup && !a.radio) {
a.radio = Ext.DomHelper.insertBefore(node.ui.anchor,
['<input type="radio" class="gx-tree-radio" name="bar" id="foo" ',
a.radioGroup, '_radio"></input>'].join(""));
}
},



originally it was

['<input type="radio" class="gx-tree-radio" name=" ',

I gave the radio the name foo and id foo but this didnīt help either.

yours,

Rob

willigogs
30 Mar 2012, 3:20 AM
I edited my previous post with some additional information, but maybe you missed it:


I notice in your second error it is returning an <HTMLInputElement> and not an EXT element, therefore the setValue method will not work.

I believe you will instead simply have to do:


node.ui.checkbox.checked = false;

I just tested this with your link, and it worked correctly :)

i.e. This unchecked the radio:


var radio = document.getElementById('foo');
radio.checked = false;

robertdbuckley
30 Mar 2012, 3:31 AM
just to confirm......

I modified my code as you said...so when the checkbox is turned off, the radiobutton should also be turned off...but this is not happening....it is still checked!?!



listeners: { // listener for the treenode
'checkchange': function(node, checked) {
//when user turns of the checkbox the radiobutton should also be set to "false"

if (checked === false) {
node.ui.checkbox.checked = false;

}
},

robertdbuckley
30 Mar 2012, 3:51 AM
You were right!...
thanks for your time and effort! that was going to ruin my weekend if I didnßīt get it sorted out!

thanks a million,

Rob

robertdbuckley
30 Mar 2012, 3:57 AM
It only works with the first node! try another node and it doesnīt work again!

willigogs
30 Mar 2012, 5:56 AM
Here you go :)

if (checked === false) {
var checkbox = Ext.get(node.ui.checkbox);
var radio = checkbox.next();
radio.dom.checked = false;
}

robertdbuckley
30 Mar 2012, 6:11 AM
excellent!!!...thanks again!