Ext.Toast 在 toast 正文中显示空白

Question

我正在尝试使用以下代码获取显示的吐司并将其隐藏在点击事件中。我不确定为什么，但在某些情况下它不会显示 toast 中的内容。

另外，有什么方法可以检查是否有现成的 toast，因此我不能再放一个？

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

提前致谢。

Answer 1

我发现了潜在的问题。这里有两点错误：作为

使用 Ext.toast 作为 sencha 提供的单例以实现可重用性
一次又一次将侦听器附加到组件

这并不是说 Ext.toast 是个坏主意，但它不适合我的情况，因为我需要 create/handle 分开祝酒词。

但是因为正在使用同一个实例，所以在将 NEXT toast 内容的不透明度设置为 0 时遇到了问题，因为我打乱了正常的流程。此外，所有事件处理程序都附加到同一个实例，并且所有事件处理程序都在任何这些 toasts 上的同一个 TAP 事件上被触发。它正在冻结屏幕。

为了让它工作，我直接使用 Ext.create('Ext.Toast') 为 toast 创建一个新实例并单独处理它。

使用后，我将从 DOM 中删除该元素。

这是一些片段：

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

Ext.Toast 在 toast 正文中显示空白

Ext.Toast showing blank in the toast body

toast

sencha-touch