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

トリガーなどを非表示にする 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
});