Ext.js add addiitonal sorting function to clear the sort in grids when the column header is clicked for the 3rd time

I have an ext.js 7.2 grid panel. Right now, I have the default functionality where

1. when the header column is clicked the first time, up arrow appears and the grid is sorted ASC
2. when the header column is clicked the second time, down arrow appears and the grid is sorted DESC The above pattern continues.

However, now I want an additional 3rd click so that, when the header column is clicked the 3rd time, I want to clear the sort.

What I have right now is a basic class that extends the "Ext.grid.Panel" and inherits its default sorting behavior.

Also, I could not find a function that will effectively remove the sorting. This throws an error.

    var store = this.getStore();
    var dataIndex = column.dataIndex;
    var sorters = store.getSorters();
    var currentSorter = sorters.getByKey(dataIndex);

    sorters.remove(currentSorter);
    store.reload()

Note: I do not want to add this functionality in the dropdown menu that appears in the header column. I just want to handle it with the arrows.

Please check the sample code attached below, in which "clickCount" flag variable is added, and on each click, it increments. When it reaches 3 clicks, the sorting is cleared, and when it's 1 or 2, it performs ASC or DESC sorting, respectively. When the click count reaches 0 again, it restores the default order. Sample Fiddle

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });
        var clickCount = 0;
        var lastClickedColumn = null;

        Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            sortable: true,
        }, {
            text: 'Email',
            dataIndex: 'email',
            flex: 1,
            sortable: true,
        }, {
            text: 'Phone',
            dataIndex: 'phone',
            sortable: true,
        }],
        height: 200,
        width: 400,
        renderTo: Ext.getBody(),
        listeners: {
            headerclick: function (ct, column, e, t, eOpts) {
                if (column === lastClickedColumn) {
                    clickCount++;
                    if (clickCount === 3) {
                        var GridStore = this.store;
                        GridStore.sorters.clear();
                        GridStore.load();
                        clickCount = 0;
                    }
                } else {
                    lastClickedColumn = column;
                    clickCount = 1;
                }
            }
        }
    });
}

});