Ext.Toast showing blank in the toast body

Question

I am trying the following code to get hold of the toast shown and hiding it on the tap event. I am not sure why, but it is not showing the content inside the toast on some occasions.

also, is there any way to check if there is an existing toast and hence I can not put another one ?

var me = this,
            toastConfig = { 
                top: 10, 
                right: 10, 
                timeout: 5000,
                hideOnMaskTap : true,
                message: '<div style="text-align: left; font-size: 14px;">' +
                        '   <p style="font-size:12px;text-align: center;margin-bottom: 8px;">New Message</p>' +
                        '   <p><b>' + receivedMessage.Sender + ' : </b></p>' +
                        '   <p>' + Ext.util.Format.ellipsis(Ext.util.Format.htmlEncode(receivedMessage.MessageBody), 80) + '</p>' +                        
                        '</div>'
            };

        var toastWindow = Ext.toast(toastConfig);
        var msg_toast = document.getElementsByClassName('x-toast')[0];

        if(msg_toast){            
            msg_toast.addEventListener(
                "touchend", 
                function(){
                    me.showMsgPanel();
                    toastWindow.hide();
                },
                true
            );
        }

Thanks in advance.

Answer 1

I found the potential issue in this. Two things wrong here : as

• Using Ext.toast as singleton as provided by sencha for reusability
• Attaching the listener to the component again and again

It is not that Ext.toast is a bad idea but it is not fitting in my situation as I need to create/handle separate toasts.

But because the same instance in being used, it was having the issue of setting the opacity of the NEXT toast content to 0, because I am disrupting the normal flow. Also, all the event handlers are getting attached to the same instance and all get triggered on same TAP event on any of those toasts. it was freezing the screen.

In order to make it work, I am directly creating a new instance for toast using Ext.create('Ext.Toast') and handling it separately.

And after the use, I am removing the element from the DOM.

Here is some snippet :

var toastWindow = Ext.create('Ext.Toast');
        toastWindow.show(toastConfig);
        toastWindow.innerElement.dom.addEventListener(
            "touchend",
            function(){
                toastWindow.hide();
                me.onMessageToastTap(receivedMessage);
            },
            true
        );