[CLOSED] Change background color of textfield, textarea, combobox after text change

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Change background color of textfield, textarea, combobox after text change

    Hi,

    I would like to change the background color of the fields of a form if somebody changed the text in them. Kind of a dirty sign which should disappear after the form is saved.

    Can somebody point me in the right direction with some example code? I'd like to have the change when the text changes, not after the field looses focus.

    Thanks
    Sharon
  2. #2

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    Hi,

    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>
        
        <style type="text/css">
            .dirty-field{
                background: silver;
            }   
        </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 &amp;&amp; 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" />
            
            <ext:FormPanel runat="server" Title="Form" Width="500" Height="500" MonitorValid="true">
                <Body>
                    <ext:FormLayout runat="server">
                        <ext:Anchor>
                            <ext:TextField runat="server" FieldLabel="TextField" Text="dfds">                           
                            </ext:TextField>
                        </ext:Anchor>
                        
                        <ext:Anchor>
                            <ext:ComboBox runat="server" FieldLabel="ComboBox">
                                <Items>
                                    <ext:ListItem Text="Item" />
                                </Items>
                            </ext:ComboBox>
                        </ext:Anchor>
                        
                        <ext:Anchor>
                            <ext:NumberField runat="server" FieldLabel="NumberField"></ext:NumberField>
                        </ext:Anchor>
                    </ext:FormLayout>
                </Body>
                
                <Listeners>
                    <ClientValidation Fn="checkFields" />
                </Listeners>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    I've got a Tab with a ContainerLayout with FieldSets and in these I have the FormLayout with my forms. Where do I set this listener?
  4. #4

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    Hi,

    You need use FormPanel. For example, put FitLayout inside FieldSet and put FormPanel inside FitLayout
    Vladimir Shcheglov
    Sr. Developer
  5. #5

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    How would I do that in code behind?
  6. #6

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    Hi,

    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);
            }
    
        </script>
        
        <style type="text/css">
            .dirty-field{
                background: silver;
            }   
        </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 &amp;&amp; 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>
    Vladimir Shcheglov
    Sr. Developer
  7. #7

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    Can I reset that somehow? After the page was saved?

    It seems to be working with textfields and comboboxes but my textareas stay white.


  8. #8

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    Back to top...
  9. #9

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    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 &amp;&amp; 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>
    Vladimir Shcheglov
    Sr. Developer
  10. #10

    RE: [CLOSED] Change background color of textfield, textarea, combobox after text change

    I do have default values for some of my comboboxes and these are always shown as dirty although the values are set in codebehind.

    I have no problems with the textfields with default values. These have a normal white background.

    Setting important! works with the textareas. Thank you.
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Dec 29, 2011, 3:11 AM
  2. Dynamically change textfield background color
    By VALUELAB in forum 1.x Help
    Replies: 0
    Last Post: Mar 04, 2011, 5:50 PM
  3. [CLOSED] Select value of combobox on text change of textfield
    By Sharon in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 08, 2009, 8:00 AM
  4. [CLOSED] Change background color of MultiSelect
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 30, 2009, 1:10 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 4:55 PM

Posting Permissions