Radio Button Handler not firing properly

Question

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.

Example of a radio button code.

{

    boxLabel: 'Source',
    name: 'source',
    inputValue: 4,
    handler: function () {
        gridstore.clearFilter();
        gridstore.filter('id', '2');
        gridstore.load();
    }
}

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?

EDIT: 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();
                }
            }
        }]
    }]
};

Updated Code 2:

var radioGroup = Ext.create('Ext.form.Panel', {


    //defaultType: 'radiofield',
    // 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,
        listeners: {
            change: function (name, newValue, oldValue) {
                alert('new value is ', newValue);
            },

        },

        items: [{
            boxLabel: 'All',
            name: 'all',
            inputValue: 'all',
            border: false,
            checked: true,
            id: 'All',

        }, {
            boxLabel: 'Time',
            name: 'time',
            inputValue: 'time',
            id: 'Time',

        }

Answer 1

The handler event looks at the change event. If you click an already checked radio it will not fire because nothing changes. There is no click event. Something that I am missing very much.

Answer 2

You need to combine them into one radio group, so only one of them will be selected. Then your event handlers will be fired again and again.

Update: first of all change all your handler to be like this:

handler: function(radio, checked) {
   if (checked) {
      // Do filtering
   }
}

Don't do getCmp and don't create additional and not used variables. Everything you need is already sent to the handler. Also you might want to add console.log(radio) before if (checked) to see if the handler is in fact being called second time.

And remove

name: xxx
id: xxx
border: xxx

from each radio button definition.

Update2: Try to add listener to RadioGroup itself:

listeners: {
   change: function(el, newValue, oldValue) { console.log('new value is ', newValue); }
   scope: me
}

Update3: Make something like this (see example http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.RadioGroup)

Panel
  -- RadioGroup
  --- listeners {}
  --- items: [
  ----- Radiobutton
  ----- Radiobutton
  ----- Radiobutton
      ]