You should use background-color instead of background because it overrides many other background properties as image and position to default values.
Also, I think it can be easier to use FormPanel and its validate method.
Please, take a look at this sample:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html >
<html>
<head id="Head1" runat="server">
<title>Ext.NET Example</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
<script>
Ext.form.TextField.prototype.initComponent = Ext.form.TextField.prototype.initComponent.createSequence(function () {
if (!this.allowBlank) {
if (this.cls) {
this.cls += " allowBlank-false";
} else {
this.cls = "allowBlank-false";
}
}
});
// Function to toggle AllowBlank property dynamically
Ext.override(Ext.form.TextField, {
setAllowBlank: function (allowBlank) {
this.allowBlank = allowBlank;
if (!allowBlank) {
this.el.addClass("allowBlank-false");
}
else {
this.el.removeClass("allowBlank-false");
}
}
});
var makeRequired = function () {
TextField1.setAllowBlank(false);
DateField1.setAllowBlank(false);
ComboBox1.setAllowBlank(false);
TextArea1.setAllowBlank(false);
TextField2.setAllowBlank(true);
DateField2.setAllowBlank(true);
ComboBox2.setAllowBlank(true);
TextArea2.setAllowBlank(true);
FormPanel1.validate();
};
</script>
<style>
.allowBlank-false {
background-color: #ffffe0 !important;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:FormPanel runat="server" Layout="FormLayout" ButtonAlign="Left" ID="FormPanel1">
<Items>
<ext:TextField ID="TextField1" runat="server" />
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
<ext:DateField ID="DateField1" runat="server" />
<ext:DateField ID="DateField2" runat="server" AllowBlank="false" />
<ext:ComboBox ID="ComboBox1" runat="server" />
<ext:ComboBox ID="ComboBox2" runat="server" AllowBlank="false" />
<ext:TextArea ID="TextArea1" runat="server" />
<ext:TextArea ID="TextArea2" runat="server" AllowBlank="false" />
</Items>
<Buttons>
<ext:Button runat="server" Text="Make Required">
<Listeners>
<Click Handler="makeRequired();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</form>
</body>
</html>