extjs - ExtJS：setDisabled(true) 使字段太暗/透明而无法读取

Question

setDisabled当我使用或disabled: trueconfig将表单字段设置为禁用状态时，例如：

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

由于透明度，它使该字段不可读。有没有改善我的禁用字段的外观和感觉的好方法？

Answer 1

这对我有用:)

.x-item-disabled {
      filter : '' !important;
 }

Answer 2

一个快速的解决方案是更改 ext-all.css（或 ext-all-debug.css）文件中的不透明度设置。默认设置似乎是：

.x-item-disabled .x-form-trigger {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
opacity: 0.3; }

如果您将不透明度值更改为 0.6，您将获得一个可读的表格。

显然不理想，因为您正在更改核心框架文件，但我当然没有找到更快的方法来纠正这个问题。

Answer 3

我做了和你们一样的事情。。

在 ExtJS 中

 {
    xtype: 'combobox',
    name: 'comboTest',
    store: "ComboTest",
    fieldLabel: "testCombo",
    queryMode: "local",
    displayField: "display",
    valueField: "value",
    disabledCls: "disabledComboTestCls" // you are now totally overriding the disabled class as set by .x-item-disabled
}

在你的 CSS 文件中

.disabledComboTestCls  {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.disabledComboTestCls input {
    font-weight: bold;
    color: #888888;
}

这很好用。

Answer 4

我们在 Ext.form.Field 上使用覆盖，它隐藏了触发器等，然后我们添加了一个 css 类。然后我们对组件进行样式设置，因为 ExtJS 的禁用功能确实不够可读。

这是示例代码：

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);
        }
    }
});

使用 CSS，您可以隐藏边框等内容...

.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 { }

现在您可以通过以下方式添加您的字段：

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

Answer 5

对于您的 Google 员工，如果您使用的是 Ext 5 及更高版本，这些答案已经过时了。现在有一个readOnly布尔值。该字段看起来完全相同，但该值不可编辑。

文件