[CLOSED] TextField overrides

  1. #1

    [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 2:22 PM. Reason: [CLOSED]
  2. #2
    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
    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 Premium Help
    Replies: 3
    Last Post: Aug 26, 2015, 5:15 PM
  2. [CLOSED] [#578] Custom Theming - JavaScript Overrides
    By tylert in forum 2.x Premium Help
    Replies: 4
    Last Post: Oct 22, 2014, 9:18 AM
  3. [CLOSED] Problem with client overrides
    By vadym.f in forum 1.x Premium Help
    Replies: 2
    Last Post: Apr 18, 2013, 3:35 PM
  4. Helpful Panel javascript overrides for 2.x
    By jchau in forum Examples and Extras
    Replies: 2
    Last Post: Feb 15, 2013, 3: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, 8:00 AM

Tags for this Thread

Posting Permissions