Print Page - cloning a control to a new control.

Title: cloning a control to a new control.
Post by: devnull on May 21, 2020, 02:16:43 AM

Code:

$.fn.multibox = $.fn.combo;

I want to create a new object that inherits all of the properties, methods etc of the combo, and then modify it adding new methods etc.

I do not want these changes to be reflected in the original combo object.

I believe that the above will create an alias to combo, and any changes to multibox will also appy to combo ??

Title: Re: cloning a control to a new control.
Post by: devnull on May 29, 2020, 08:28:53 PM

Bump...

Title: Re: cloning a control to a new control.
Post by: jarry on May 30, 2020, 06:29:53 AM

This is the skeleton to create a new multibox component based on combo.

Code:

(function($){
	function create(target){
		var state = $.data(target, 'multibox');
		var opts = state.options;
		
		$(target).addClass('multibox-f');
		$(target).combo($.extend({}, opts, {
			
		}));

	}
	$.fn.multibox = function(options,param){
		if (typeof options == 'string'){
			var method = $.fn.multibox.methods[options];
			if (method){
				return method(this, param);
			} else {
				return this.combo(options, param);
			}
		}
		options = options || {};
		return this.each(function(){
			var state = $.data(this, 'multibox');
			if (state){
				$.extend(state.options, options);
			} else {
				state = $.data(this, 'multibox', {
					options: $.extend({}, $.fn.multibox.defaults, $.fn.combo.parseOptions(this), options)
				});
			}
			create(this);
		});
	};
	$.fn.multibox.defaults = $.extend({}, $.fn.combo.defaults, {
	});
	$.fn.multibox.methods = {
		options: function(jq){
			var copts = jq.combo('options');
			return $.extend($.data(jq[0], 'multibox').options, {
				width: copts.width,
				height: copts.height,
				originalValue: copts.originalValue,
				disabled: copts.disabled,
				readonly: copts.readonly
			});
		}
	}
})(jQuery);

Title: Re: cloning a control to a new control.
Post by: devnull on May 30, 2020, 05:56:47 PM

Thanks so much :-)

Title: Re: cloning a control to a new control. [solved]
Post by: devnull on July 14, 2020, 05:12:23 PM

Hi Jarry is it not possible to just do:

Code:

$.fn.multibox = Object.assign($.fn.combo);

Title: Re: cloning a control to a new control. [solved]
Post by: jarry on July 14, 2020, 07:56:43 PM

Quote from: devnull on July 14, 2020, 05:12:23 PM

Hi Jarry is it not possible to just do:

Code:

$.fn.multibox = Object.assign($.fn.combo);

The two plugins 'multibox' and 'combo' will share the same definitions. The new methods added to the multibox will be added to combo too.

Title: Re: cloning a control to a new control. [solved]
Post by: devnull on July 14, 2020, 11:23:03 PM

OK, then is it then possible to create a clone() function that will allow me to generically clone any control to a new control ?

This would be very useful :-)

Title: Re: cloning a control to a new control. [solved]
Post by: Tomas on July 24, 2020, 09:28:44 AM

How would you call the new control from markup?

Thanks,
Tomas

Title: Re: cloning a control to a new control. [solved]
Post by: devnull on July 28, 2020, 06:24:48 PM

You would call it just like you call any other standard control, only using the new control name.

Title: Re: cloning a control to a new control.
Post by: devnull on November 23, 2020, 03:14:17 AM

@jarry - this multibox control seems to work except for when using form.load() function.

I have created a setValue() function for this control, and for debugging purposes, I logged some text to the console when the setValue() function is called.

If I call this from the chrome javascript console, then the value is updated correctly and I see the text logged to the console, however when I use form.load() the text is not logged to the console and it looks like form.load() does not call setValue() on the control.

Any suggestions on what the cause / fix may be ?

Title: Re: cloning a control to a new control.
Post by: jarry on November 24, 2020, 07:21:10 PM

Please run the code below to add the 'multibox' component to the form field set.

Code:

<script>
$.parser.plugins.push('multibox');
$.fn.form.defaults.fieldTypes.unshift('multibox');
</script>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on May 21, 2020, 02:16:43 AM