1. #1
    Sencha User makana's Avatar
    Join Date
    Apr 2008
    Location
    Dresden, Germany
    Posts
    527
    Vote Rating
    19
    makana has a spectacular aura about makana has a spectacular aura about

      1  

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

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


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

    Code:
    /**
     * @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:
    Code:
    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
    Programming today is a race between software engineers striving to build bigger and better іdiot-proof programs, and the universe striving to produce bigger and better idiots. So far, the universe is winning. (Rick Cook)

    Enhanced ExtJS adapter for Adobe AIR

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the contribution.

    Scott.

  3. #3
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    +1
    Vador

Thread Participants: 2