javascript - Sencha Touch 中的 Toast 实现

Question

我正在使用具有不同 Toast 的 Sencha Touch 应用程序来显示“成功”或“信息”等消息。但我有随机行为，例如:

1° 如果您使用 Toast 通过一个操作点击导航到应用程序，并且在 Toast 启动时导航到其他屏幕，则 Toast 会出现随机行为，获取最后一种颜色而不是更改..(在测试用例中具有相同的颜色)颜色但有不同的消息，请您阅读代码)

2° 有时 Toast 不会出现，我也没有解释。

关于代码有什么建议吗？目前它是一个单例类，根据操作从应用程序的其他部分/ Controller 调用。

另一方面，还有其他具有类似行为的方法吗？也许需要改变策略并且不使用Toasts..

它发生在 Windows 8 和 iOS 中，我使用的是 2.4.1 版本，阅读 2.4.2 的发行说明没有关于框架的这个元素的新闻，我猜与更新到最新框架无关版本。

这是我的 Toast Manager 类:

/**
 * Loading popup as a static-functions class
 *
 * Different toast-messages colors:
 * 0 --> green
 * 1 --> orange
 * 2 --> red
 *
 * We create a config object and depending of the status we show a Toast
 */
Ext.define('xx.view.components.ToastManager', {
  singleton         : true,
  requires          : [
    'Ext.Toast'
  ],
  config            : {
    toastOptions: {
      message      : '',
      centered     : false,
      width        : 200,
      height       : 100,
      bottom       : '10%',
      modal        : false,
      right        : 10,
      style        : '',
      type         : 'slide', duration: 850, easing: 'ease-out',
      hideAnimation: {type: 'fadeOut', duration: 650, easing: 'ease-out'},
      timeout      : 3000
    },
    toastComponent : null,
    t : null
  },

  constructor       : function () {
    this.initConfig();
  },
  changeVisibility: function() {
    if(this.getT()) {
      clearTimeout(this.getT());
    }
    var toastes = Ext.query('.x-toast');
    for(var i = 0; i < toastes.length; i++) {
      Ext.get(toastes[i]).setStyle('visibility', 'visible');
    }
    var t = setTimeout(function() {
      var toastes = Ext.query('.x-toast');
      for(var i = 0; i < toastes.length; i++) {
        Ext.get(toastes[i]).setStyle('visibility', 'hidden');
      }
    }, 4000);
    this.setT(t);
  },
  /**
   * Shows a successful message
   * @param label
   * @param status
   */
  showToastMessage       : function (label, status) {
    var options = this.getToastOptions();
    options.message = label;
    switch (status) {
      case 0:
        options.style = 'background-color: #30B420';
        break;
      case 1:
        options.style = 'background-color: #FFA500';
        break;
      case 2:
        options.style = 'background-color: #ff0000';
        break;
      default:
        options.message = "?"
    }
    this.changeVisibility();
    this.setToastComponent(Ext.toast(this.getToastOptions()));
  }
});

Answer 1

我正在使用这个函数来处理我的 toast 消息(尽管在 ExtJS 中):

showToastMessage: function(message, alignTo){
    Ext.toast({
        cls: 'toast-window',
        header: false,
        html : '<div class="toast">' + message + '</div>',
        animate: true,
        slideInAnimation: 'ease',
        slideInDuration: 300,
        slideOutDuration: 200,
        autoCloseDelay: 1500,
        align: alignTo ? alignTo : 't'
    });
}

您可以将一些 CSS 应用于 toast-window 和 toast 类，以使您的消息看起来不错。

您只需将消息传递给此函数，它就会显示一个不错的 toast !