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
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!'
});
}
}
}