PDA

View Full Version : Radio Button Handler not firing properly



pr33n
12 Mar 2012, 12:30 PM
I have a set of 6 radio buttons : All , Time, Suppression, Address , Session and Tags.

I have a handler associated with each button that fires an event on it being clicked. The handler will fire a grid filtering event and load only certain portions of a grid depending on what radio is selected.

The first time I click the radio, the handler loads and works properly displaying the right part of the grid for each of the 6 radios but if I try to fire it again (come back to an already clicked radio and click on it again), it doesn't work. I am sure I need to send some parameters to the handler. Can someone help me with what they should be?

This is my entire code for that section


var radioGroup = {

xtype : 'fieldset',
// title: 'Radio Groups',
layout : 'anchor',
height : 250,
border : false,
defaults : {
anchor : '100%',
labelStyle : 'padding-left:4px;',
border : false
},
collapsible : false,
items : [ {
xtype : 'radiogroup',
// fieldLabel: 'Single Column',
columns : 1,
border : false,

items : [ {
boxLabel : 'All',
name : 'all',
inputValue : 1,
border : false,
checked : true,
id:'All',
handler : function() {
var all=Ext.getCmp('All');
if(all.getValue()){
gridstore.clearFilter();

gridstore.load();
}
}
}, {
boxLabel : 'Time',
name : 'time',
inputValue : 2,
id:'Time',
handler : function() {
var time=Ext.getCmp('Time');
if(time.getValue()){
gridstore.clearFilter();
gridstore.filter('id', '3');
gridstore.load();
}
},

}, {
boxLabel : 'Assignment',
name : 'assignment',
inputValue : 3,
id:'Assignment',
handler : function() {
var assignment=Ext.getCmp('Assignment');
if(assignment.getValue()){
gridstore.clearFilter();
gridstore.filter('id', '5');
gridstore.load();
}
}
}, {
boxLabel : 'Source',
name : 'source',
inputValue : 4,
id:'Source',
handler : function() {
var source=Ext.getCmp('Source');
if(source.getValue()){
gridstore.clearFilter();
gridstore.filter('id', '2');
gridstore.load();
}
}
}, {
boxLabel : 'Address',
name : 'address',
inputValue : 5,
id:'Address',
handler : function() {
var address=Ext.getCmp('Address');
if(address.getValue()){
gridstore.clearFilter();
gridstore.filter('id', '5');
gridstore.load();
}
}
}, {
boxLabel : 'Supression',
name : 'supression',
id:'Supression',
inputValue : 6,
handler : function() {
var supression=Ext.getCmp('Supression');
if(supression.getValue()){
gridstore.clearFilter();
gridstore.filter('id', '6');
gridstore.load();
}
}
}, {
boxLabel : 'Tags',
name : 'tags',
id:'tags',
inputValue : 7,
handler : function() {
var tags=Ext.getCmp('tags');
if(tags.getValue()){
gridstore.clearFilter();
gridstore.filter('id', '7');
gridstore.load();
}
}
} ]
} ]
};

The first click works perfectly its the second and subsequent clicks thats a problem!

mitchellsimoens
12 Mar 2012, 2:50 PM
It should fire when it has been checked and unchecked. It only ever fires once?

pr33n
12 Mar 2012, 2:54 PM
Yep. Only fires the first time. Seems to be this issue: http://www.sencha.com/forum/showthread.php?7194-on-quot-check-quot-event-in-radio-field-is-only-firing-once

That was a bug in the older versions. Not sure it if it has been addressed. IS there any work-around?

mitchellsimoens
12 Mar 2012, 3:19 PM
Using Ext JS 4.0.7, this works as expected:


new Ext.panel.Panel({
renderTo : document.body,
width : 400,
height : 400,
layout : 'fit',
items : [
{
xtype : 'radiogroup',
fieldLabel : 'Two Columns',
items : [
{
boxLabel : 'Item 1',
name : 'rb',
inputValue : '1',
handler : function() {
console.log('one');
}
},
{
boxLabel : 'Item 2',
name : 'rb',
inputValue : '2',
checked : true,
handler : function() {
console.log('two');
}
}
]
}
]
});

pr33n
12 Mar 2012, 3:45 PM
My setup is a bit more complicated. I am using portlets to display my js inside Liferay. I used the simple handler you have used above with the exception that I used alerts to display text instead on console.log and the same issue even with this simple handler. Fires once. No action after that.



{
boxLabel : 'Assignment',
name : 'assignment',
inputValue : 'assignment',
id:'Assignment',
handler : function() {
alert('one');
}

}

lars2740
19 Mar 2014, 5:54 AM
I have the same problem and above input does not help - has anyone found out why?