What's New?

[CLOSED] Setting background for required input fields

Page 2 of 2 FirstFirst 12
  1. #11
    Sep 30, 2013, 1:51 PM
    Quote Originally Posted by vadym.f View Post
    Should I call validate() inside the Blur handler of every TextField object? If not called explicitly, the control is validated on blur I believe.
    Well, validation occurs on blur automatically by default.

    Quote Originally Posted by vadym.f View Post
    if it's called within the setAllowBlank override, it immediately validates the control displaying the MsgTarget icon.
    Yes, it does validation visualization as well.

    Quote Originally Posted by vadym.f View Post
    Another thing I've noticed is that underlining doesn't reappear in this setup even when validate() is invoked.
    Do you you mean a red curl line under "underlying"? Please clarify exact steps to reproduce the issue. However, please note that that red curl line is a CSS background-image rule. Probably, it is overridden by
    .allowBlank-false {
    background: #ffffe0 !important;
}
  2. #12
    Sep 30, 2013, 2:14 PM
    Quote Originally Posted by Daniil View Post

    Do you you mean a red curl line under "underlying"? Please clarify exact steps to reproduce the issue. However, please note that that red curl line is a CSS background-image rule. Probably, it is overridden by
    .allowBlank-false {
    background: #ffffe0 !important;
}
    That's probably why the curly red line is gone. My simple test case now works as expected. When I apply this approach towards the real life scenario, there're consistency issues that I can't reproduce in my little test case. Part of the problem could be that I've got plugins like InputTextMask included in some of the text fields, whose AllowBlank property is modified. Another contributing factor might be that some text fields' visibility is toggled dynamically. I'll try to put together a more involved test case to better assess those issues. In the meantime, thanks a lot for bearing with me on this customization.
  3. #13
    Sep 30, 2013, 6:50 PM
    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>
  4. #14
    Oct 03, 2013, 8:56 PM
    Thanks, Daulet, but the controls look out of whack if background-color property is used in the CSS rule. Please refer to the screenshot attached.Click image for larger version.  Name: Before.JPG  Views: 10  Size: 15.8 KB  ID: 6988
  5. #15
    Oct 03, 2013, 9:50 PM
    Sorry, I don't quite understand what's wrong with these controls?
  6. #16
    Oct 04, 2013, 4:16 AM
    I guess Vadym expects all the allowBlank="false" fields to be yellow.

    Seems I found a way to get the fields yellow and keep the curl red line.

    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";
                }
            }
        });
 
        // 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, textarea.allowBlank-false {
            background-image: none;
            background-color: #ffffe0 !important;
        }

        .x-form-invalid.allowBlank-false, textarea.x-form-invalid.allowBlank-false {
            background-image: url("/extjs/resources/images/default/grid/invalid_line-gif/ext.axd");
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:FormPanel 
            ID="FormPanel1" 
            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 Fn="makeRequired" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>
  7. #17
    Oct 06, 2013, 7:59 PM
    Thanks much, Daniil! It seems to be working well throughout my test cases.
  8. #18
    Sep 10, 2015, 7:15 AM
    Here is a related Ext.NET v3 discussion.
    http://forums.ext.net/showthread.php?60061
Page 2 of 2 FirstFirst 12

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