extjs4 - ExtJS 4:適切な変数なしでフィールドをテーマにする方法は?

Question

フィールドが読み取り専用の場合、灰色のテキスト色でカスタマイズされた Ext.form.field.Field を作成したいと考えています。readOnly でない場合は、デフォルトのテキストの色が使用されます。

そのために使用できる変数が _form.scss ファイルにないようです。

$form-field-readonly-color のような新しい変数を作成できますか?

Answer 1

最終的な解決策は次のとおりです。

.x-form-field.x-form-text[readonly]  {
    color: gray !important;
}

テキストフィールドには、x-form-fieldとx-form-textの2つのクラスがあります。属性「読み取り専用」はExtJSによって設定され、括弧で選択できます。ここを参照してください。

このコードはscssファイルに直接貼り付けることができるため、Extファイルを汚染することはありません。

Answer 2

独自のCSSを使用して、デフォルトをオーバーライドできます。

.x-item-disabled {
    color: #888888 !important;
    -moz-opacity: 100;
    opacity: 1;
    filter: alpha(opacity = 100);
    zoom: 1;
}
.x-form-item-label .x-item-disabled {
    color: #888888 !important;
    -moz-opacity: 100;
    opacity: 1;
    filter: alpha(opacity = 100);
    zoom: 1;
}

オーバーライドが高品質であることを保証することはできませんが、クラスは正しいです。