[CLOSED] Change background color on formfield when it is modified

  1. #1

    [CLOSED] Change background color on formfield when it is modified

    I am trying to set a background color on a formfield (could textfield, datefield, combobox) using the DirtyCls class. I am using the Gray theme. however this is changing the background color of the entire cell including the label and cell. I just want the input box to change.

    In version 1.x of Ext.Net I used to have a listerner to check for ValidityChange and call the following code but this also highlighting the entire cell. can you advise on some ways to accomplish my requirement.

    thanks

    var checkFields = function(form) {
    
        form.getForm().getFields().items.forEach(function (f)
        {
            if (undefined == f.originalValue || undefined == f.getValue()) {
            }
            else if (f.isFormField && f.originalValue.toString() != f.getValue().toString()) {
                f.getEl().addCls("dirty-field")
            }
            else {
                f.getEl().removeCls("dirty-field");
            }
        });
    }
    Last edited by Daniil; Mar 30, 2015 at 3:35 PM. Reason: [CLOSED]
  2. #2
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var onFieldChange = function (field) {
                if (field.isDirty())
                {
                    field.inputEl.addCls('dirtyField');
                }
                else
                {
                    field.inputEl.removeCls('dirtyField');
                }
            }
        </script>
        <style type="text/css">
            .dirtyField {
                background-color: lightgray !important;
                background-image: none;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager Theme="Crisp" runat="server" />
        <ext:FormPanel Title="Ext.Net" Width="300" Height="150" runat="server">
            <FieldDefaults MsgTarget="Side" />
            <Items>
                <ext:TextField FieldLabel="First Name" AllowBlank="false" runat="server" />
                <ext:TextField FieldLabel="Last Name" AllowBlank="false" runat="server" />
            </Items>
            <Listeners>
                <FieldChange Handler="onFieldChange(field);" />
            </Listeners>
        </ext:FormPanel>
    </body>
    </html>
  3. #3
    Thank you. works great.
  4. #4
    LAEUser, do you mind if we mark this thread as closed?
  5. #5
    Please Do. thanks again

Similar Threads

  1. [CLOSED] How to change the background color based on theme change
    By speedstepmem4 in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 16, 2015, 2:02 PM
  2. [CLOSED] Change Color Window's Header Background Color
    By rguardado in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 16, 2015, 3:48 PM
  3. [CLOSED] Change TreePanel background color and toolbar color
    By jchau in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 07, 2012, 4:42 PM
  4. Replies: 12
    Last Post: Jun 17, 2009, 12:07 PM
  5. Change Tab background color or background image
    By georgelanes in forum 1.x Help
    Replies: 0
    Last Post: Nov 06, 2008, 3:55 PM

Posting Permissions