[英]Toast implementation in Sencha Touch
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: 我正在使用具有不同Toast的Sencha Touch应用程序来显示诸如“成功”或“信息”等消息。但是我有随机行为,例如:
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) 如果您导航应用程序以使用Toast轻按一个动作并在Toast处于启动状态时导航到其他屏幕,则为1º,Toast具有随机行为,即获得最后一种颜色而不是更改。.(在测试用例中,具有相同的颜色但带有不同的消息,请阅读代码)
2º Sometimes Toast is not appearing and I do not have explanation. 2º有时没有出现吐司,我也没有解释。
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. 它发生在Windows 8和iOS中,并且我使用的是2.4.1版本,阅读2.4.2的发行说明并没有有关此框架元素的消息,我想与更新到最新的框架版本无关。
Here my Toast Manager class: 这是我的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()));
}
});
I'm using this function for my toast messages (in ExtJS though): 我正在为我的吐司消息使用此功能(尽管在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'
});
}
You can apply some css to toast-window
and toast
classes to make you message look nice. 您可以将一些CSS应用于toast-window
和toast
类,以使您的消息看起来不错。
You just pass your message to this function and it should show a nice toast! 您只需将您的消息传递给此功能,它应该显示一个很好的吐司!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.