Toast implementation in Sencha Touch

Question

I am working in a Sencha Touch app with different Toasts to show messages like "successful" or "info" etc.. but I am having random behavior, for example:

1º if you navigate for the application tapping in a one action with Toast and you navigate to other screen while Toast is up, toast has a random behavior getting the last color instead of change..( in the test case with the same color but with different message, please you can read the code)

2º Sometimes Toast is not appearing and I do not have explanation.

Any suggestion about the code? currently it is a singleton class, and it is called from other parts/controllers of the app depending the action.

On the other hand, any other approach with a similar behavior? maybe it is needed to change the strategy and no use Toasts..

It is happening in Windows 8 and iOS and I am using 2.4.1 version, reading the release notes of 2.4.2 has not news about this element of the framework, and I guess is not relevant to update to the latest framework version.

Here my Toast Manager class:

/**
 * 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

I'm using this function for my toast messages (in ExtJS though):

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

You can apply some css to toast-window and toast classes to make you message look nice.

You just pass your message to this function and it should show a nice toast!