Combobox - disabledClass not working correctly

[ap]

When a Form field is disabled, we can specify the css class for the disabled field. The disabledClass property works fine for all other form fields except the Combobox.

myCombo.disabledClass='my-disabled-cls' will only set the input fields to that cls, but the div wrapper is still set to the default 'x-item-disabled'.

Here is the HTML copy generated for the combobox.

<div style="padding-left: 80px;" id="test" class="x-form-element">
<div class="x-form-field-wrap x-item-disabled" id="ext-gen506" style="width: 80px;">
<input type="text" name="test" id="ext-comp-1053" autocomplete="off" size="24" class="x-form-text x-form-field x-combo-noedit my-disabled-cls" style="width: 55px;" readonly="true" disabled=""/>
<img class="x-form-trigger x-form-arrow-trigger" src="http://extjs.com/s.gif" id="ext-gen507"/>
</div>
</div>


This is found in the TriggerField.js


Ext.form.TriggerField = function(config){
Ext.form.TriggerField.superclass.constructor.call(this, config);
this.mimicing = false;
this.on('disable', this.disableWrapper, this);
this.on('enable', this.enableWrapper, this);
};
// private
disableWrapper : function(){
if(this.wrap){
this.wrap.addClass('x-item-disabled');
}
}

This would take care of it for now.



Ext.override(Ext.form.TriggerField, {

disableWrapper : function(){
if(this.wrap){
if(this.disabledClass){
this.wrap.addClass(this.disabledClass);
}else{
this.wrap.addClass('x-item-disabled');
}
}
},


enableWrapper : function(){
if(this.wrap){
if(this.disabledClass){
this.wrap.removeClass(this.disabledClass);
}else{
this.wrap.removeClass('x-item-disabled');
}
}
}
});