Question

I want to add 3 radiobuttons in a toolbar like this:

dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'radiogroup',
                        width: 500,
                        fieldLabel: 'Show',
                        items: [
                            {
                                xtype: 'radiofield',
                                id: 'all',
                                name: 'show',
                                boxLabel: 'All vehicles',
                                checked: true
                            },
                            {
                                xtype: 'radiofield',
                                id: 'online',
                                name: 'show',
                                boxLabel: 'Online vehicles'
                            },
                            {
                                xtype: 'radiofield',
                                id: 'offline',
                                name: 'show',
                                boxLabel: 'Offline vehicles'
                            }
                        ]
                    }
                ]
            }
        ]

I want to use a listener for these buttons. When someone clicks on offline i want to load internals.load({url:internals/offline.json});

i just can’t get it working. Any advice/help?

Thanks

Answer 1

Try this:

{   
    xtype: 'radiogroup',
    width: 500,
    fieldLabel: 'Show',
    items: [
        {
            xtype: 'radiofield',
            id: 'all',
            name: 'show',
            boxLabel: 'All vehicles',
            checked: true,
            inputValue: 'all'
        },
        {
            xtype: 'radiofield',
            id: 'online',
            name: 'show',
            boxLabel: 'Online vehicles',
            inputValue: 'online'
        },
        {
            xtype: 'radiofield',
            id: 'offline',
            name: 'show',
            boxLabel: 'Offline vehicles',
            inputValue: 'offline'
        }
    ],
    listeners: {
        change: function(field, newValue, oldValue) {
            var value = newValue.show;
            if (Ext.isArray(value)) {
                return;
            }
            if (value == 'offline') {
                // do something
            }
        }
    }
}