最近在学习extjs4,做crud操作时要将与后台数据交互结果反馈给用户,如果用extjs的MessageBox感觉有点笨重,就想要自己设计一个像android的Toast一样的信息提示框,google了一下,extjs官方居然有现成的例子,稍微改动了一下,自己做做笔记
Ext.define('Ext.ux.Toast',{
extend:'Ext.Component',
alias:'widget.toast',
initComponent:function(){
var me = this;
var msgCt;
function createBox(t, s) {
return [
'<div class="msg">',
'<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
'<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="font-size:13px"><h3>',
t,
'</h3>',
s,
'</div></div></div>',
'<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
'</div>'].join('');
}
/**
* 信息提示
* @member Ext.ux.Toast
* @param {String}
* title 标题
* @param {String}
* format 内容
* @param {autoHide}
* autoHide 是否自动隐藏
* @param {pauseTime}
* pauseTime 信息停留时间
*/
me.msg = function(title, message, autoHide, pauseTime) {
if (!msgCt) {
msgCt = Ext.DomHelper.insertFirst(document.body, {
id : 'msg-div',
style : 'position:absolute;top:10px;width:250px;margin:0 auto;z-index:20000;'
}, true);
}
// //给消息框右下角增加一个关闭按钮
// message+='<br><span style="text-align:right;font-size:12px;
// width:100%;">' +
// '<font color="blank"><a style="cursor:hand;"
// οnclick="Ext.example.hide(this);">关闭</a></font></span>'
var s = Ext.String.format.apply(String, Array.prototype.slice.call(
arguments, 1));
var m = Ext.DomHelper.append(msgCt, {
html : createBox(title, s)
}, true);
msgCt.alignTo(document, 't-t');
m.slideIn('t');
if (!Ext.isEmpty(autoHide) && autoHide == true) {
if (Ext.isEmpty(pauseTime)) {
pauseTime = 1000;
}
console.log('pauseTime==>'+pauseTime);
// 在extjs4中m.pause(t)方法已经被标记为 DEPRECATED
m.ghost("t", {
delay: pauseTime,
remove : true
});
}
}
me.callParent();
return me;
},
/**
* 隐藏提示框
* @param {} v
*/
hide : function(v) {
var msg = Ext
.get(v.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
msg.ghost("t", {
remove : true
});
}
},function(){
Ext.ux.Toast = new this();
});
该提示框可以设置是否自动隐藏,提示框停留时间,还可以添加删除提示框的按钮(只要加上被注释的代码就行)
我把文件放在extjs/ux/目录下,文件名为Toast.js,则在app.js中就添加如下代码Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux','extjs/ux');
Ext.application({
requires:[‘Ext.ux.Toast']
......
});