Ext.ux.window.OptionsMessageBox (MessageBox with selectable options)

[makana]

I want to share a messagebox extension that allows you to display selectable options via radiobuttons or checkboxes.

/**
 * @class Ext.ux.window.OptionsMessageBox
 * @extends Ext.window.MessageBox
 * MessageBox with RadioGroup or CheckboxGroup to let the user select options.
 * You can give an object to specify the options that have to be shown.
 *
 *     Ext.ux.OptionsMessageBox.show({
 *         title: 'Please select',
 *         msg: 'What do you want to do?',
 *         options: {
 *             remove: 'Remove object',
 *             rename: 'Rename object'
 *         },
 *         value: 'remove',
 *         buttons: Ext.ux.OptionsMessageBox.OKCANCEL,
 *         fn: function(button, value)
 *         {
 *             if (button == 'ok' && value == 'remove')
 *                 doRemove();
 *         },
 *         scope: this
 *     });
 * 
 *     Ext.ux.OptionsMessageBox.promptOption(
 *         'Please select',
 *         'What do you want to do?',
 *         {
 *             remove: 'Remove object',
 *             rename: 'Rename object'
 *         },
 *         function(button, value)
 *         {
 *             if (button == 'ok' && value == 'remove')
 *                 doRemove();
 *         },
 *         this,
 *         'remove');
 */
Ext.define('Ext.ux.window.OptionsMessageBox', {
	extend: 'Ext.window.MessageBox',

	// private
	btnCallback: function(btn)
	{
		var me = this,
			value,
			field;

		// Options defined, evaluate the value
		if (me.cfg.options)
		{
			field = me.cfg.multiSelect === true ? me.checkboxGroup : me.radioGroup;
			value = field.getValue() || null;
			if (value)
				value = value.options || null;
			field.removeAll();
			// Important not to have focus remain in the hidden Window; Interferes with DnD.
			btn.blur();
			me.hide();
			me.userCallback(btn.itemId, value, me.cfg);
		}
		// no options, use inherited
		else
		{
			me.callParent(arguments);
		}
	},
	initComponent: function()
	{
		var me = this;
		me.callParent(arguments);
		// RadioGroup einfügen
		me.radioGroup = Ext.create('Ext.form.RadioGroup', {
			columns: 1
		});
		me.checkboxGroup = Ext.create('Ext.form.CheckboxGroup', {
			columns: 1
		});
		me.promptContainer.add(me.radioGroup, me.checkboxGroup);
	},
	reconfigure: function(cfg)
	{
		var me = this;

		me.callParent(arguments);

		Ext.suspendLayouts();

		me.radioGroup.removeAll();
		me.checkboxGroup.removeAll();
		
		if (me.cfg.options)
		{
			if (me.cfg.multiSelect === true)
			{
				var value = Ext.Array.from(me.cfg.value);
				Ext.Object.each(me.cfg.options, function(key, value)
				{
					if (Ext.isString(value))
						value = {
							boxLabel: value
						};
	
					me.checkboxGroup.add(Ext.apply({}, {
						name: 'options',
						inputValue: key,
						checked: Ext.Array.contains(me.cfg.value, key)
					}, value));
				});
				me.checkboxGroup.show();
				me.radioGroup.hide();
			}
			else
			{
				Ext.Object.each(me.cfg.options, function(key, value)
				{
					if (Ext.isString(value))
						value = {
							boxLabel: value
						};
	
					me.radioGroup.add(Ext.apply({}, {
						name: 'options',
						inputValue: key,
						checked: key === me.cfg.value
					}, value));
				});
				me.radioGroup.show();
				me.checkboxGroup.hide();
			}
		}
		else
		{
			me.radioGroup.hide();
			me.checkboxGroup.hide();
		}

		Ext.resumeLayouts(true);
	},
	/**
	 * Shows a MessageBox with OK and Cancel buttons and selectable options.
	 * The value of the selected option	is passed as second parameter to the callback function.
	 * @param {String} title The title bar text
	 * @param {String} msg The message box body text
	 * @param {Object} options Options (see {@link #method-show}).
	 * @param {Function} [fn] The callback function invoked after the message box is closed.
	 * See {@link #method-show} method for details.
	 * @param {Object} [scope=window] The scope (`this` reference) in which the callback is executed.
	 * @param {String} [value=null] Initially selected Option
	 * @param {Boolean} [multiSelect=false] Whether to allow multiple selects (checkboxes).
	 * @return {Ext.ux.window.OptionsMessageBox} this
	 */
	promptOption: function(cfg, msg, options, fn, scope, value, multiSelect)
	{
		if (Ext.isString(cfg))
		{
			cfg = {
				options: options,
				title: cfg,
				minWidth: this.minPromptWidth,
				msg: msg,
				buttons: this.OKCANCEL,
				callback: fn,
				scope: scope,
				value: value,
				multiSelect: multiSelect
			};
		}
		return this.show(cfg);
	}
	/**
	 * @method show
	 * 
	 * @param {Object} config Can have all config options of {@link Ext.window.MesageBox#method-show} and:
	 * 
	 * @param {Object} config.options Object that describes the possible options.
	 * The keys are the values passed as 2nd parameter to the callback function.
	 * The values can be either a string used as {@link Ext.form.field.Checkbox#cfg-boxLabel} or a config
	 * object for {@link Ext.form.field.Checkbox}/{@link Ext.form.field.Radio}. The config options
	 * `{@link Ext.form.field.Checkbox#cfg-name}`, `{@link Ext.form.field.Checkbox#-inputValue}` and
	 * `{@link Ext.form.field.Checkbox#cfg-checked}` are ignored in this case.
	 * 
	 * @param {String/String[]} config.value Initially selected option(s)
	 * 
	 * @param {Boolean} [multiSelect=false] Whether to allow multiple selections. A {@link Ext.form.CheckboxGroup}
	 * is displayed in this case, otherwise a {@link Ext.form.RadioGroup}.
	 */
}, function()
{
	/**
	 * @class Ext.ux.OptionsMessageBox
	 * @extends Ext.ux.window.OptionsMessageBox
	 * @singleton
	 * Singleton instance of {@link Ext.ux.window.OptionsMessageBox}.
	 */
	Ext.ux.OptionsMessageBox = new this();
});

How to use:

Ext.ux.OptionsMessageBox.show({
	title: 'Please select',
	msg: 'What do you want to do?',
	options: {
		remove: 'Remove object',
		rename: 'Rename object'
	},
	value: 'remove',
	buttons: Ext.ux.OptionsMessageBox.OKCANCEL,
	fn: function(button, value)
	{
		if (button == 'ok' && value == 'remove')
			doRemove();
	},
	scope: this
});

How it looks like:
screenshot_20130213.png

[scottmartin]

Thank you for the contribution.

Scott.

[ajaxvador]

+1