Hello Mikael!
Instead of going to the "readonly" path that you are unsure how to style them (as they are naturally not restyled), why don't you just override the
-disabled
CSS class appended to the components as they are disabled, so you make these disabled components more readable to your taste?
To see what exact CSS classes you need to override, you need to open developer tools and delve into the DOM elements to see which CSS classes they get, and choose the best CSS selector to use. This goes a bit ahead of Ext.NET itself (that's purely CSS). Ext.NET does it share by leaving you enough CSS classes to choose from for every component within components, so you'll always find how to style something to your needs. I'll show you a couple examples with the combo box, bringing in an Ext.NET feature that allows you to actually choose what gets styled how you want.
So, to restyle any combo boxes (actually, form fields) to your needs, one of, or both, CSS selectors may be necessary -- more depending on the specific component. This seemed enough to remove the "dim" and re-color the text of a combo box:
/* default/global disabled disabled form item effects */
.x-form-item-default.x-item-disabled {
opacity: 1;
}
.x-item-disabled * {
color: red;
}
You can check it with a combo box like this:
<ext:ComboBox runat="server" ID="ComboBox1" FieldLabel="ValueDis" Region="South" Disabled="true">
<Items>
<ext:ListItem Text="Item 1" Value="item1" />
<ext:ListItem Text="Item 2" Value="item2" />
<ext:ListItem Text="Item 3" Value="item3" />
<ext:ListItem Text="Item 4" Value="item4" />
<ext:ListItem Text="Item 5" Value="item5" />
</Items>
</ext:ComboBox>
Then, in case you want just some specific combo boxes to be subject to this special "disabled styling", you can just give it a
BaseCls
setting and proper CSS selectors, like this, in case we use
BaseCls="my-custom-dis-fx"
in a combo box:
/* disabled item effect specific to items with custom BaseCls (or Cls) */
.my-custom-dis-fx.x-form-item-default.x-item-disabled {
opacity: 0.5;
}
.my-custom-dis-fx .x-item-disabled * {
color: blue;
}
You can use this CSS with the first one to see how the general components will be styled via the "global" selector, whereas the component with
BaseCls
would be subject to this second one.
As you may have noticed, there are two layers of CSS selection for disabled effects, one basically sets the field's "opacity" to dim it out, and the other actually styles the individual parts of the components like text and background colors.
In case you are interested in the input field alone, just navigate the DOM down to the
input
component and check its and its surrounding CSS classes assigned. You would then be able to assign effects however you need. Again, CSS knowledge is imperative to this level of customization.
In case you are still interested in the
ReadOnly
setting, it also implies CSS class changes to the components, so depending on what you want to style, you still can use selectors specific to these readonly fields. You can also set components the
ReadOnly
so they are not styled, and give one of the available CSS settings (
BaseCls
,
CellCls
,
Cls
,
DisabledCls
and so on) with proper CSS selector/rule (it's up to you to decide which works best in your case) for the visual effect you want to attain.
Hope these general guidelines helps you in the long run, for other components and aspects of Ext.NET, when you want pontual changes in layout.