Hi,
1. add !important to css rule to solve TextArea issue
2. To reset colors after saving just call initFields js function
Please see the following sample
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
TabPanel tabPanel = new TabPanel{Width = 500, Height = 300};
this.Form.Controls.Add(tabPanel);
Tab tab = new Tab{Title = "Tab1"};
tabPanel.Tabs.Add(tab);
ContainerLayout containerLayout = new ContainerLayout();
tab.BodyControls.Add(containerLayout);
FieldSet fieldSet = new FieldSet{Title = "FieldSet"};
containerLayout.Items.Add(fieldSet);
FitLayout fitLayout = new FitLayout();
fieldSet.BodyControls.Add(fitLayout);
FormPanel formPanel = new FormPanel{Border = false, MonitorValid = true};
formPanel.Listeners.ClientValidation.Fn = "checkFields";
fitLayout.Items.Add(formPanel);
FormLayout formLayout = new FormLayout();
formPanel.BodyControls.Add(formLayout);
Anchor anchor = new Anchor();
anchor.Items.Add(new TextField{FieldLabel = "Text", Text = "Text"});
formLayout.Anchors.Add(anchor);
anchor = new Anchor();
anchor.Items.Add(new TextArea { FieldLabel = "Text", Text = "Text" });
formLayout.Anchors.Add(anchor);
Coolite.Ext.Web.Button b = new Coolite.Ext.Web.Button {Text = "Reset"};
b.Listeners.Click.Handler = string.Format("initFields({0});", formPanel.ClientID);
this.Form.Controls.Add(b);
}
</script>
<style type="text/css">
.dirty-field{
background: silver !important;
}
</style>
<script type="text/javascript">
var initFields = function(form){
form.getForm().items.each(function(f){
if(f.isFormField){
f.originalValue = f.getValue();
}
});
}
var isInit = false;
var checkFields = function(form){
if(!isInit){
initFields(form);
isInit = true;
}
form.getForm().items.each(function(f){
if(f.isFormField && f.originalValue != f.getRawValue()){
f.getEl().addClass("dirty-field");
}
else{
f.getEl().removeClass("dirty-field");
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
</form>
</body>
</html>