[英]Toast implementation in Sencha Touch
我正在使用具有不同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()));
}
});
我正在为我的吐司消息使用此功能(尽管在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
类,以使您的消息看起来不错。
您只需将您的消息传递给此功能,它应该显示一个很好的吐司!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.