readonly style problem with combobox, datebox that extendes textbox

[Stefan B.]

Hello. We defined a color for readonly textbox componend's with the easyui CSS for textbox-readonly

Code:

.textbox-readonly {
  	background-color : #bcbcbc;
}
 
.textbox-text-readonly {
    background-color : #bcbcbc; 
}

That works fine for textboxes that are marked with readonly = true.

But components like combobox and datebox also show the readonly color, but they are not set to readonly, they only set editable=false flag!

Code:

	$('#svEdPurchaseDate').datebox({
		width:'140',
		editable: false,
		readonly: false
	});	

But not editable components should not shown with the readonly color!
This looks like a bug?!

[jarry]

If a combo component has 'editable' property set to false, it will not be edited, The input box is read-only, it has the same CSS style with the readonly input.

[Stefan B.]

Yes that is correct, but for me it is not so the same, so we would use a different style for readonly and not editable.

How can we handle this?

the readonly flag of the component disable the form field
i mean this is not the same and should have different css classes ...

[jarry]

Only the disabled component disable the form field. The readonly field only set its input box to noneditable.

The non-editable and readonly combo components have the same effect, they all prevent users from editing the input box, they all have the same '.textbox-text-readonly' CSS style. The difference is that the non-editable combo component allows the user to click the drop-down arrow to select a new value while the readonly combo component does not.

If you really want to make the non-editable combo different from the readonly combo, please try the code below to add a new 'textbox-text-noneditable' CSS class when the 'editable' property set to false.

Code:

(function($){
	var plugin = $.fn.textbox;
	$.fn.textbox = function(options, param){
		if (typeof options == 'string'){
			return plugin.call(this, options, param);
		} else {
			return this.each(function(){
				plugin.call($(this), options, param);
				var opts = $(this).textbox('options');
				$(this).textbox('textbox').removeClass('textbox-text-noneditable').addClass(!opts.editable ? 'textbox-text-noneditable' : '');
			});
		}
	};
	$.fn.textbox.defaults = plugin.defaults;
	$.fn.textbox.parseOptions = plugin.parseOptions;
	$.fn.textbox.methods = plugin.methods;
})(jQuery);

[Stefan B.]

THX for this solution 
That is exactly what we search.
I test it and it works fine!