extjs 信息提示组件 Toast

最近在学习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;"
			// onclick="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']
        ......
});