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',

        }

```