mise en œuvre de Toast dans Sencha tactile

Question

Je travaille dans une application Sencha Touch avec différents Toasts pour afficher les messages comme « info » « succès » ou etc .. mais j'ai un comportement aléatoire, par exemple:

1º si vous naviguer pour l'application tapant en une action avec Toast et vous naviguez vers un autre écran tandis que Toast est en haut, toast a un comportement aléatoire obtenant la dernière couleur au lieu de changer .. (dans le cas de test avec la même couleur mais avec un message différent, s'il vous plaît vous pouvez lire le code)

2º Parfois Toast n'apparaît pas et je n'ai pas d'explication.

Une suggestion sur le code? Actuellement, il s'agit d'une classe singleton et elle est appelée par d'autres parties/contrôleurs de l'application en fonction de l'action. D'autre part, toute autre approche avec un comportement similaire?

peut-être il est nécessaire de changer la stratégie et pas utiliser Toasts ..

Il se passe dans Windows 8 et iOS et j'utilise la version 2.4.1, la lecture des notes de version de 2.4.2 n'a pas de nouveautés sur cet élément de le cadre, et je suppose ne est pas pertinent de mettre à jour à la dernière version du cadre.

Voici ma classe 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

J'utilise cette fonction pour mes messages de pain grillé (en ExtJS bien):

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

Vous pouvez appliquer certaines css à toast-window et toast cours pour que votre message soit beau.

Vous venez de passer votre message à cette fonction et il devrait montrer un joli toast!