3

readOnly とマークされたフィールドがいくつかあるフォームがあります。

問題は、ユーザーがマウスまたはキーボード タブを使用してこれらの読み取り専用フィールドにフォーカスまたは移動できることであり、これを禁止したいと考えています。

これを許可しない方法の 1 つは、そのようなフィールドをすべて「無効」としてマークすることです。ただし、無効とマークされている場合、フィールドはフォーカスできませんが、これらの無効なフィールドもサーバーに送信されませんが、これは予期されたものではありません。

では、readOnly フィールドへのフォーカスをどのように防ぐことができるでしょうか?

PS: 読み取り専用フィールドでのフォーカスを禁止する理由は、キーボードを使用したナビゲーションを改善するためです。タブ キーを使用すると、ユーザーが編集できるフィールドのみを移動またはジャンプし、すべての読み取り専用フィールドが無視されます。

4

2 に答える 2

1

フォーカスイベントをリッスンするリスナーを基本Fieldクラスに追加し、フィールドがreadOnlyの場合、次のコンポーネントにフォーカスすることができます。

listeners: {
    focus: function(field)
    {                       
        if (field.readOnly)
        {
            field.nextSibling().focus();
        }
    }
}
于 2012-07-31T08:59:50.807 に答える
0

getSubmitData メソッドをオーバーライドし、他のプロパティを割り当てて、オーバーライドされたメソッドに関係なく送信することを知らせます (たとえば、forceSubmit):

Ext.define('My.form.Field', {
    override: 'Ext.form.field.Field',

    getSubmitData: function() {
        var me   = this,
            data = null;

        if ( me.disabled && me.readOnly && me.forceSubmit ) {
            data = {};
            data[me.getName()] = '' + me.getValue();
        }
        else {
            return me.callParent();
        }

        return data;
    }
});

次に、コードでこのクラスを要求し、無効にする必要があるフィールドを設定し、読み取り専用にし、forceSubmit を持たせることができます。

my field = new Ext.form.field.Text({
    disabled:    true,
    readOnly:    true,
    forceSubmit: true,

    value: 'foo'
});

これでうまくいくはずです。

于 2012-07-31T18:00:17.303 に答える