What's New?

[CLOSED] TextField overrides

  1. #1
    Sep 09, 2015, 8:10 PM

    [CLOSED] TextField overrides

    Hi,

    Could you please advise how to convert to v3.x the following v1.7 overrides:

    // http://forums.ext.net/showthread.php?26600-CLOSED-Setting-background-for-required-input-fields
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");
        }
    }
});
    Last edited by Daniil; Sep 10, 2015 at 1:22 PM. Reason: [CLOSED]
  2. #2
    Sep 10, 2015, 7:32 AM
    Hi Vadym,

    I took the example from a related Ext.NET v1 thread and converted it to v3.

    Example
    <%@ Page Language="C#" %>
  
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
  
    <script>
        Ext.form.field.Text.override({
            initComponent: function () {
                this.callParent(arguments);

                if (!this.allowBlank) {
                    if (this.cls) {
                        this.cls += " allowBlank-false";
                    } else {
                        this.cls = "allowBlank-false";
                    }
                }
            },

            // Function to toggle AllowBlank property dynamically
            setAllowBlank: function (allowBlank) {
                this.allowBlank = allowBlank;
                this.el[allowBlank ? "removeCls" : "addCls"]("allowBlank-false");
            }
        });

        var makeRequired = function () {
            App.TextField1.setAllowBlank(false);
            App.DateField1.setAllowBlank(false);
            App.ComboBox1.setAllowBlank(false);
            App.TextArea1.setAllowBlank(false);

            App.TextField2.setAllowBlank(true);
            App.DateField2.setAllowBlank(true);
            App.ComboBox2.setAllowBlank(true);
            App.TextArea2.setAllowBlank(true);

            App.FormPanel1.validate();
        };
    </script>
  
    <style>
        .allowBlank-false .x-form-field {
            background-image: none;
            background-color: #ffffe0 !important;
        }

        .x-theme-gray .allowBlank-false .x-form-field.x-form-invalid-field {
            background-image: url("/extjs/packages/ext_theme_gray/build/resources/images/grid/invalid_line-gif/ext.axd");
        }

        .x-theme-blue .allowBlank-false .x-form-field.x-form-invalid-field {
            background-image: url("/extjs/packages/ext_theme_classic/build/resources/images/grid/invalid_line-gif/ext.axd")
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:FormPanel 
            ID="FormPanel1" 
            runat="server" 
            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" Handler="makeRequired" />
            </Buttons>
        </ext:FormPanel>
    </form>
</body>
</html>
  3. #3
    Sep 10, 2015, 1:15 PM
    Thanks for the excellent example, Daniil! Please mark this thread as closed.

Similar Threads

  1. [CLOSED] FormLayout overrides the label width
    By vadym.f in forum 3.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 26, 2015, 4:15 PM
  2. [CLOSED] [#578] Custom Theming - JavaScript Overrides
    By tylert in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 22, 2014, 8:18 AM
  3. [CLOSED] Problem with client overrides
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 18, 2013, 2:35 PM
  4. Helpful Panel javascript overrides for 2.x
    By jchau in forum Examples and Extras
    Replies: 2
    Last Post: Feb 15, 2013, 2:02 PM
  5. Where to put overrides and extensions ideally
    By sz_146 in forum 1.x Help
    Replies: 4
    Last Post: Dec 05, 2008, 7:00 AM

Tags for this Thread

Posting Permissions