[CLOSED] Setting background for required input fields

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Setting background for required input fields

    Hi,

    I'm curious if there's any elegant way to set a default distinct background to required form input fields. I believe that can be accomplished in the DocumentReady event handler by iterating through the collection of form panel fields and checking their AllowBlank property or some other custom parameter, then adding or removing a custom CSS class. What I'm interested to know is if a generic approach exists to that effect.
    Last edited by Daniil; Oct 07, 2013 at 3:56 AM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    I can suggest the following.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html >
    <html>
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <ext:ResourcePlaceHolder 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";
                    }
                }
            });
        </script>
    
        <style>
            .allowBlank-false {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:TextField runat="server" />
            <ext:TextField runat="server" AllowBlank="false" />
    
            <ext:DateField runat="server" />
            <ext:DateField runat="server" AllowBlank="false" />
    
            <ext:ComboBox runat="server" />
            <ext:ComboBox runat="server" AllowBlank="false" />
        </form>
    </body>
    </html>
  3. #3
    Thanks much for this solution, Daniil! It looks like what I've been after. You can close this thread down.
  4. #4
    Hi Daniil,

    I noticed that TextArea is unfortunately unaffected by this solution, despite extending Ext.form.TextField. I can see that the CSS rule applies to a TextArea instance just like it does to TextField but the textarea.x-form-field subclass apparently overrides it. Would you mind providing some pointers how to make it work for TextArea as well?

    <%@ 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";
                    }
                }
            });
        </script>
    
        <style>
            .allowBlank-false {
                background: #ffffe0;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <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" />
        </form>
    </body>
    </html>
  5. #5
    Hello!

    Yes, there are some CSS rules for Textare that override your CSS. Try to use !important:

    .allowBlank-false {
        background: red !important;
    }
  6. #6
    Thanks Daulet! The CSS change you suggested makes it work for TextArea!

    I'm also trying to come up with an override to create a function toggling the AllowBlank property dynamically. The code I have in mind doesn't seem to work. Could you take a look and suggest what's wrong or missing?

    <%@ 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) {
                        // Doesn't work
                        if (this.cls) {
                            this.cls += " allowBlank-false";
                        } else {
                            this.cls = "allowBlank-false";
                        }
                    }
                    else {
                        // Implementation - remove the allowBlank CSS rule??
                    }
                }
            });
    
            var makeRequired = function () {
                TextField1.setAllowBlank(false);
                DateField1.setAllowBlank(false);
                ComboBox1.setAllowBlank(false);
                TextArea1.setAllowBlank(false);
            };
        </script>
    
        <style>
            .allowBlank-false {
                background: #ffffe0 !important;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Panel runat="server" Layout="FormLayout" ButtonAlign="Left">
                <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:Panel>
    
        </form>
    </body>
    </html>
  7. #7
    You should use addClass and removeClass:

    Ext.override(Ext.form.TextField, {
    	setAllowBlank: function (allowBlank) {
    		this.allowBlank = allowBlank;
    		if (!allowBlank) {
    			this.el.addClass("allowBlank-false");
    		}
    		else {
    			this.el.removeClass("allowBlank-false");
    		}
    	}
    });
  8. #8
    Thanks, Daulet! It works better now. However, the "This field is required" tooltip and the underlining decoration don't apply or get removed when toggling AllowBlank that way. Maybe, some sort of refresh is needed?

    <%@ 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);
            };
        </script>
    
        <style>
            .allowBlank-false {
                background: #ffffe0 !important;
            }
        </style>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            <ext:Panel runat="server" Layout="FormLayout" ButtonAlign="Left">
                <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:Panel>
    
        </form>
    </body>
    </html>
  9. #9
    It needs to trigger validation to get the things re-applied.
    TextField2.validate();
  10. #10
    Thanks, Daniil! Should I call validate() inside the Blur handler of every TextField object? If not called explicitly, the control is validated on blur I believe. If it's called within the setAllowBlank override, it immediately validates the control displaying the MsgTarget icon. Another thing I've noticed is that underlining doesn't reappear in this setup even when validate() is invoked. I kind of like this behavior but am curious to know what's missing.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Required field validation for mask input
    By MTSI in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 11, 2013, 6:51 PM
  2. GridPanel Required Fields
    By Gianluca in forum 1.x Help
    Replies: 1
    Last Post: Sep 05, 2012, 7:42 PM
  3. Layout issues with input fields
    By Viktor Reiser in forum 1.x Help
    Replies: 1
    Last Post: May 18, 2012, 6:22 PM
  4. Setting explicit ID for input hidden
    By DavidS in forum 1.x Help
    Replies: 2
    Last Post: Jun 15, 2011, 12:13 PM
  5. [CLOSED] [1.0] Required Fields
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 15, 2010, 10:57 PM

Tags for this Thread

Posting Permissions