How to create a singleton Toast in Extjs

Question

I need to create a single toast on the screen of my application, today if I click multiple times on a button, several toasts are presented.

EDIT:

showToast: function(message) {
    var openedToast = Ext.get(document.querySelector('[id^="toast-"]'));
    if (openedToast != null) {
        var toast = Ext.getCmp(openedToast.id);
        toast.close();
    }
    Ext.defer(function() {
        Ext.toast({
            html: message,
            align: 't'
        });
    }, 80);
}

But if the user clicks the button quickly, the toast is created several times

Need way more specifics than this. Post some code, created a plunkr if possible, talk about what you've tried, what is the expected behavior, etc. — TomSlick, Jun 08 '17 at 20:03
But what exactly you want to do with other toasts (If you want to display multiple toasts at once)? Just ignore or remove previous toast and show new one or...? — Sergey Novikov, Jun 09 '17 at 15:18

score 2 · Accepted Answer · answered Jun 08 '17 at 20:25

Just give it a unique identifier and check if it already exists before creating a new one.

{
    xtype: 'button',
    handler: function(){
        if(!Ext.ComponentQuery.query('#myToast').length){
            Ext.toast({
                itemId: 'myToast',
                html: 'toast!'
            });
        }
    }
}

» Fiddle

How to create a singleton Toast in Extjs

1 Answers1