ExtJS4扩展MessageBox

最新推荐文章于 2021-08-05 11:52:08 发布

原创最新推荐文章于 2021-08-05 11:52:08 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个基于ExtJS框架的自定义消息框组件MsgBoxK.js，该组件提供了丰富的对话框类型如警告、信息提示、询问等，并展示了如何在项目中调用这些对话框。

1、MsgBoxK.js:

(function() {

	Ext.define('My.MsgBox', {

				extend : 'Ext.window.MessageBox',

				alternateClassName : ['My.Msg'],

				initComponent : function() {

					var me = this;
					
					Ext.applyIf(me, {
								alert : function(cfg, msg, fn, scope) {
									if (Ext.isString(cfg)) {
										cfg = {
											title : cfg,
											msg : msg,
											buttons : Ext.MessageBox.OK,
											fn : fn,
											scope : scope,
											minWidth : Ext.MessageBox.minWidth
										};
										return Ext.MessageBox.show(cfg);
									}
								},

								info : function(cfg, msg, fn, scope) {
									if (Ext.isString(cfg)) {
										cfg = {
											title : cfg,
											msg : msg,
											buttons : Ext.MessageBox.OK,
											fn : fn,
											scope : scope,
											minWidth : Ext.MessageBox.minWidth,
											icon : Ext.MessageBox.INFO
										};
										return Ext.MessageBox.show(cfg);
									}
								},

								question : function(cfg, msg, fn, scope) {
									if (Ext.isString(cfg)) {
										cfg = {
											title : cfg,
											msg : msg,
											buttons : Ext.MessageBox.YESNO,
											fn : fn,
											scope : scope,
											minWidth : Ext.MessageBox.minWidth,
											icon : Ext.MessageBox.QUESTION
										};
										return Ext.MessageBox.show(cfg);
									}
								},

								warn : function(cfg, msg, fn, scope) {
									if (Ext.isString(cfg)) {
										cfg = {
											title : cfg,
											msg : msg,
											buttons : Ext.MessageBox.OKCANCEL,
											fn : fn,
											scope : scope,
											minWidth : Ext.MessageBox.minWidth,
											icon : Ext.MessageBox.WARNING
										};
										return Ext.MessageBox.show(cfg);
									}
								},
									
								error : function(cfg, msg, fn, scope) {
									if (Ext.isString(cfg)) {
										cfg = {
											title : cfg,
											msg : msg,
											buttons : Ext.MessageBox.OK,
											fn : fn,
											scope : scope,
											minWidth : Ext.MessageBox.minWidth,
											icon : Ext.MessageBox.ERROR
										};
										return Ext.MessageBox.show(cfg);
									}
								}
							});

					me.callParent(arguments);
				}
			},function(){
				My.MsgBox = My.Msg = new this();
			});
})();

2、调用：

My.MsgBox.alert('alert', 'alert.');

My.MsgBox.info('info', 'info.');

My.MsgBox.question('question','question?');

My.MsgBox.warn('warn', 'warn!');

My.MsgBox.error('error', 'error!!');