PDA

View Full Version : on "check" event in radio field is only firing once



rollyF
4 Jun 2007, 2:44 PM
What is wrong with my code? I am trying to toggle the showing and hidding of a fieldset depending on what radio button is selected. The check event is only firing once.

I'm an Ext newbee.

TIA,
Rolly


Ext.onReady(function(){

var showToggle = function fnCallback(e){
if(e.value == '2') {
date_fieldset.show();
}
else {
date_fieldset.hide();
}
}

var form_account = new Ext.form.Form({
labelAlign:'right',
labelWidth: 90,
url:''
});

var search_option_1 = new Ext.form.Radio({
boxLabel: 'Accounts that I created or modified today',
name: 'search_option',
value: '1',
checked: true,
width:190
});

var search_option_2 = new Ext.form.Radio({
boxLabel: 'Accounts that I created or modified by range of dates',
name: 'search_option',
value: '2',
width:190
});

var search_from_date = new Ext.form.DateField({
fieldLabel: 'From',
name: 'from_date',
width:190,
allowBlank:true
});

var search_to_date = new Ext.form.DateField({
fieldLabel: 'To',
name: 'from_date',
width:190,
allowBlank:true
});

form_account.fieldset(
{legend:'Search Criteria',hideLabels:true},
search_option_1,
search_option_2
)

var date_fieldset = form_account.fieldset(
{legend: 'Date Range', hidden:true},
search_from_date,
search_to_date
)

form_account.addButton('Search');

search_option_1.on('check', showToggle);
search_option_2.on('check', showToggle);

form_account.render('search-form');
});

BernardChhun
4 Jun 2007, 6:56 PM
according to this example: http://extjs.com/deploy/ext/examples/menu/menus.html

the radio button has a checkHandler config attribute to which you can link a function. I'm pretty sure this works out everytime.


var search_option_1 = new Ext.form.Radio({
boxLabel: 'Accounts that I created or modified today',
name: 'search_option',
value: '1',
checked: true,
width:190,
checkHandler : showToggle
});

var search_option_2 = new Ext.form.Radio({
boxLabel: 'Accounts that I created or modified by range of dates',
name: 'search_option',
value: '2',
width:190,
checkHandler : showToggle
});

rollyF
5 Jun 2007, 10:21 AM
Bernard,

Thank you for your suggestion. However, checkHandler does not appear to be a config attribute of Ext.form.Radio. When I tried it the event is not firing at all.

-Rolly

BernardChhun
5 Jun 2007, 10:31 AM
Hey again,

you are SOO right about that one. The example I posted was based of a checkbox within the Menu widget! my bad Rolly.

so looking in the docs, the check event should do it.


var checkHandler = function(checkbox, checked){
if (checked){
date_fieldset.show();
} else {
date_fieldset.hide();
}
}

What is bugging me right now is the way you make your function before you even declare your Ext.form.Radio. are you sure the date_fieldset still exists when the function is called?

try doing
console.log(date_fieldset) before trying to hide or show them.

rollyF
5 Jun 2007, 11:07 AM
Bernard,

Thank you again for your followup. The date_fieldset does exist and as what I mentioned, the event is only firing once and it shows the hidden date_fieldset. But when I select the other option, I expect the event to fire again and hide the date_fieldset. The event doesn't fire again.

By the way, what is the best practice of declaring the function? I thought that declaring that on top does not mean anything because what bind these events are the following statement:

search_option_1.on('check', showToggle);
search_option_2.on('check', showToggle);

which is after I declare the date_fieldset.

Thanks,
rolly

rollyF
5 Jun 2007, 11:33 AM
I've attached the zip file, in case anyone wants to try this.

-rolly

tryanDLS
5 Jun 2007, 11:54 AM
I think there's a bug here - it would appear that when a radio button is clicked, the others aren't toggling off their checked value, so the event is not fired when the button is clicked the 2nd time around.

cchiriac
7 Jun 2007, 4:33 AM
It looks like a bug to me too. My current workaround is to attach the listeners to the Radio's element. I'm doing this after i call the form.render. Here's a raw copy from my code :



fs.render(dialog.body);

radioCompany.el.on('click', function(){
companyFieldset.show();
personFieldset.hide();
});

radioPerson.el.on('click', function(){
personFieldset.show();
companyFieldset.hide();
});


fs is the form, the two radios are defined before the call to the render method.

phibix
19 Jun 2007, 9:20 PM
It is a bug. I've traced the logic of how Ext.form.Radio works. It only fires the check event when the checked value of the dom element is different than the one stored in the class instance. This works fine for check boxes since they're unchecked by clicking on them which invokes onClick and properly updates the instance variable 'checked'.

For radio buttons this never happens. Unselecting the element happens by clicking on another element, thus onClick is never fired on the unselected radio button and the value this.checked is never updated.

The solution is to have Radio overwrite setValue from Ext.form.Checkbox so it deselects all inputs with the same name and then selects the one being set.

I'll work up some code and then post it in a moment.

P

phibix
19 Jun 2007, 10:07 PM
Okay this is what I came up with. The logic is:

1. locate all the form radio buttons for this group
2. set the checked instance variable on each fields's Ext.form.Radio instance to false
3. set the value to true on the current field

I had two gotchas. First I use brackets in my form names. Its a rails-ism and lets rails auto format my params in to hashes and arrays. The reason this matters is because I started with the same code used in Ext.form.Radio.getGroupValue() to locate all the radio buttons belonging to this group, and brackets aren't allowed in DomQuery's attribute comparisions. I ended up instead selecting all nodes in the current form that are of type radio then check in the iterator that the name is the same as the current node.

The second gotcha was there's no easy way to access the Ext.form.Radio instance. To make it easy to get to one instance from another without having to tell the Radio objects about each other, I store a reference to the Ext.form.Radio in the dom element itself.

Here's the code:


Ext.form.Radio.prototype.onRender = function(ct, position) {
Ext.form.Radio.superclass.onRender.call(this, ct, position);
this.el.dom.__ext_field = this;
}

Ext.form.Radio.prototype.setValue = function(v) {
var radios = this.el.up('form').select('input[type=radio]');
for(var i = 0; i < radios.elements.length; i++) {
if(radios.elements[i].__ext_field && radios.elements[i].name == this.el.dom.name) {
radios.elements[i].__ext_field.checked = false;
}
}

this.checked = (v === true || v === 'true' || v == '1');
if(this.el && this.el.dom){
this.el.dom.checked = this.checked;
}
this.fireEvent("check", this, this.checked);
}


Works for me. :-)

P

tryanDLS
20 Jun 2007, 7:50 AM
This is on the TODO list for bug fixes.

Skeleton
11 Jul 2007, 2:59 AM
Wow, I have thought that I was alone when I have come accross to this bug today, but thankfully I am not :) I hope this will be fixed soon. I have used the workaround that cchiriac mentioned for now.

dantheman
7 Aug 2007, 1:16 PM
Me three.

:D
--dan

sjivan
28 Aug 2007, 5:11 PM
This is an issue even with Ext 1.1 final. Are they any plans on fixing this in the next Ext 1.1.x release?

Thanks,
Sanjiv

jsakalos
29 Aug 2007, 9:25 AM
A couple of posts above Tim says that it is on the TODO list so I'd say yes. ;)

sjivan
29 Aug 2007, 9:51 AM
Okay. That post was in June and 1.1 final was released since so just wanted to bring this back on the radar to make sure it didn't get lost.

Sanjiv

jsakalos
29 Aug 2007, 9:57 AM
Good, I'll let Jack know about it.

SteveEisner
11 Sep 2007, 8:59 PM
I hit this today and found a lot of related threads.
The latest & greatest "fix code" as of 9/11/07:
http://extjs.com/forum/showthread.php?t=11620

cdomigan
8 Oct 2007, 5:15 PM
I've just hit this bug in 2.0 :-( Any plans to fix this soon?

Neville Burnell
21 Oct 2007, 6:43 PM
I'm hitting this issue in 2.0 also! :((

mystix
21 Oct 2007, 7:11 PM
hey guys, it'll be good if you could report this in the 2.x bugs forum with a link back to this thread. (remember to do a search for the same issue first before posting ;))

aconran
21 Oct 2007, 10:26 PM
Another good reference for this bug along with some information on why the bug exists. http://extjs.com/forum/showthread.php?t=13247

americos
11 Nov 2007, 5:38 PM
This bug is really annoying, I hope it will be fixed on final Version 2.0

sureshbusyboy
27 May 2008, 11:08 PM
Can you tell me what is the impact of 'e' in your function.