I have a Ext window (Ext v3) that contains a toolbar with a toggleGroup. My goal is to keep the buttons toggled state so when the window is opened the buttons are toggled the way they were before.

My Tbar looks like this

new Ext.Toolbar({
            items: [
                {
                    'xtype': 'button',
                    'text': 'Order Alerts',
                    'listener': 'alertsOnClick',
                    'listenerType': 'click',
                    'enableToggle': 'true',
                    'toggleGroup': 'buttonTabs',
                    'id': 'order_all',
                }
            ]
        })

I'm recording the ids by onclick like so

   function alertsOnClick(){
    return function () {
        grid.currentButton = this.id;
    }
}

When the window is opened I wait for the store to finish by using .load() with a call back function that runs

    const gridStore = Ext.getCmp('some_id').getStore();
    if(!window.grid || grid.type === 'clear') {
        window.grid = { };
        window.grid.type = 'clear';
        window.grid.currentButton = 'all_filter'
        Ext.getCmp(grid.currentButton).toggle();
        gridStore.filter(grid.field, grid.type);
        return undefined;
    }
    gridStore.filter(grid.field, grid.type);
    let t = Ext.getCmp(grid.currentButton);
    // TODO: Find out why you need to toggle this three times to get it to work
    t.toggle();
    t.toggle();
    t.toggle();

If I call .toggle() once it does not work but, it seems to work if I spam .toggle() an odd number of times. Part of me thinks that the buttons themselves are not really destroyed on close but, their CSS is cleared. I'm not sure if that's the case though. Any thoughts on how to handle this?