Sencha Touch中的Toast實施

Question

我正在使用具有不同Toast的Sencha Touch應用程序來顯示諸如“成功”或“信息”等消息。但是我有隨機行為，例如：

如果您導航應用程序以使用Toast輕按一個動作並在Toast處於啟動狀態時導航到其他屏幕，則為1º，Toast具有隨機行為，即獲得最后一種顏色而不是更改。.（在測試用例中，具有相同的顏色但帶有不同的消息，請閱讀代碼）

2º有時沒有出現吐司，我也沒有解釋。

關於代碼有什么建議嗎？ 當前它是一個單例類，根據操作從應用程序的其他部分/控制器中調用。

另一方面，還有其他具有類似行為的方法嗎？ 也許需要改變策略並且不使用吐司。

它發生在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

我正在為我的吐司消息使用此功能（盡管在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類，以使您的消息看起來不錯。

您只需將您的消息傳遞給此功能，它應該顯示一個很好的吐司！