在Sencha Touch中实现Toast

Question

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

1º如果您使用Toast在一个操作中导航到应用程序，并在Toast打开时导航到其他屏幕，toast会有一个随机行为来获取最后的颜色，而不是更改。(在具有相同颜色但具有不同消息的测试用例中，请阅读代码)

2º有时Toast没有出现，我无法解释。

对代码有什么建议吗？目前它是一个单例类，它根据动作从应用程序的其他部分/控制器调用。

另一方面，是否有其他具有类似行为的方法？也许它需要改变策略，而不使用Toast..

它发生在Windows8和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类，以使您的消息看起来更漂亮。

您只需将您的消息传递给此函数，它就会显示一个漂亮的祝酒词！