Question

When I set a form field into the disabled state using setDisabled or the disabled: true config, for example:

form.getComponent(1).setDisabled(true);

it makes the field unreadable due to the transparency. Is there a good way to improve the look and feel of my disabled fields?

Answer 1

We use an override on Ext.form.Field, which hides the triggers etc, and then we add a css class. We then style the component, because the disabled function of ExtJS is indeed not readable enough.

Here is example code:

var originalRender = Ext.form.Field.prototype.onRender;
Ext.override(Ext.form.Field, {
    UxReadOnly: false,
    UxDisplayOnly: function (displayOnly, cls) {
        // If no parameter, assume true
        var displayOnly = (displayOnly === false) ? false : true;


        if (displayOnly) {
            // If a class name is passed in, use that, otherwise use the default one.
            // The classes are defined in displayOnly.html for this example 
            var cls = (cls) ? cls : 'x-form-display-only-field';

            // Add or remove the class
            this.addClass(cls);

            // Set the underlying DOM element's readOnly attribute
            this.setReadOnly(displayOnly);
            this.editable = false;

            // Get this field's xtype (ie what kind of field is it?)
            var xType = this.getXType();

            if (xType == 'combo' | xType == 'combobox' | xType == 'Ext.ux.Combo' | xType == 'Ext.ux.ComboSearch') {
                this.addClass('x-form-display-only-combo');
                this.hideTrigger = true;
                this.on('expand', function (field) {
                    if (field.hideTrigger)
                        field.collapse();
                });
            }
            else if (xType == 'datefield') {
                this.addClass('x-form-display-only-datefield');
                this.hideTrigger = true;
                this.on('expand', function () {
                    if (this.hideTrigger)
                        this.collapse();
                });
                this.editable = false;
            } //elseif for each component u want readonly enabled
            else {
                this.addClass('x-form-display-only-other');
            }

            // For fields that have triggers (eg date,time,dateTime), 
            // show/hide the trigger
            if (this.trigger) {
                this.trigger.setDisplayed(!displayOnly);
            }

        } else {
            this.UxFullField(cls);
        }
    },
    afterRender: function () {
        var me = this;
        me.UxDisplayOnly(me.UxReadOnly, 'x-form-display-only-field');
        this.callParent(arguments);
    },
    UxFullField: function (cls) {
        // If a class name is passed in, use that, otherwise use the default one.
        // The classes are defined in displayOnly.html for this example 
        var cls = (cls) ? cls : 'x-form-display-only-field';

        this.removeCls(cls);

        // Set the underlying DOM element's readOnly attribute
        this.setReadOnly(false);
        this.editable = true;

        // Get this field's xtype (ie what kind of field is it?)
        var xType = this.getXType();

        if (xType == 'combo' | xType == 'combobox' | xType == 'Ext.ux.Combo' | xType == 'Ext.ux.ComboSearch') {
            this.removeCls('x-form-display-only-combo');
            this.setHideTrigger(false);
        }
        else if (xType == 'datefield') {
            this.removeCls('x-form-display-only-datefield');
            this.setHideTrigger(false);
            this.editable = true;
        }//elseif for each component u want readonly enabled
        else {
            this.removeCls('x-form-display-only-other');
        }

        // For fields that have triggers (eg date,time,dateTime), 
        // show/hide the trigger
        if (this.trigger) {
            this.setHideTrigger(false);
        }
    }
});

With css you hide stuff like borders etc…

.x-form-display-only-field{}

.x-form-display-only-other input, .x-form-display-only-other select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-combo input, .x-form-display-only-combo select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-datefield input, .x-form-display-only-datefield select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }
.x-form-display-only-file input, .x-form-display-only-file select { background: transparent !important; border: 1px solid transparent !important; cursor: pointer; cursor: default; font-weight: bold; background-image: none !important; background-color: transparent !important; }

.x-form-display-only-checkbox { }
.x-form-display-only-radiogroup { }

Now you can add your field the following way:

Ext.create('Ext.form.field.Text', {
     name: 'example',
     UxReadOnly: true
});