Utilize ValidationStatus on thousand separator number field

  1. #1

    Utilize ValidationStatus on thousand separator number field

    I have a simple form. contain Name, DOB, Income.
    I would like to utilize ValidationStatus on my simple form.
    I have overide number field function with thousand separator formated text.

    Click image for larger version. 

Name:	2021-04-13_14-02-50.png 
Views:	95 
Size:	29.1 KB 
ID:	25524

    unfortunately validatation status cannot detect the numberfield already inputed.

    How to use validation status on thousand separator number field.

    Thanks

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void FormSave(object sender, DirectEventArgs e)
        {
            FormStatusBar.SetStatus(new StatusBarStatusConfig { Text = "Form saved!", IconCls = " ", Clear2 = true });
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    
        <script type="text/javascript">
    
            Ext.override(Ext.form.Field, {
                fireKey: function (e) {
                    if (e.keyCode == e.ENTER) {
                        e.stopEvent();
                    }
                    this.fireEvent('keypress', this, e);
                    if (e.isSpecialKey())
                        this.fireEvent('specialkey', this, e);
                    this.fireEvent('keydown', this, e);
                    this.fireEvent('keyup', this, e);
                },
    
                setCursorPosition: function (pos) {
                    var el = this.inputEl.dom;
                    if (typeof (el.selectionStart) === "number") {
                        el.focus();
                        el.setSelectionRange(pos, pos);
                    } else if (el.createTextRange) {
                        var range = el.createTextRange();
                        range.move("character", pos);
                        range.select();
                    } else {
                        throw 'setCursorPosition() not supported';
                    }
                },
    
                getCursorPosition: function () {
                    var el = this.inputEl.dom;
                    if (typeof (el.selectionStart) === "number") {
                        return el.selectionStart;
                    } else if (document.selection && el.createTextRange) {
                        var range = document.selection.createRange();
                        range.collapse(true);
                        range.moveStart("character", -el.value.length);
                        return range.text.length;
                    } else {
                        throw 'getCursorPosition() not supported';
                    }
                }
            });
    
            Ext.override(Ext.form.field.Number, {
                currencySymbol: null,
                useThousandSeparator: true,
                alwaysDisplayDecimals: true,
                hideTrigger: true,
                fieldStyle: 'text-align: right;',
                enableKeyEvents: true,
                onKeyUp: function (e, o) {
                    if (this.getRawValue() != this.getFormattedValue(this.getRawValue())) {
                        posbef = this.getCursorPosition();
                        lengthbef = this.getRawValue().length;
                        this.setRawValue(this.getFormattedValue(this.getRawValue()));
                        this.setCursorPosition(posbef + this.getRawValue().length - lengthbef);
    
                    }
                },
                setValue: function (value) {
                    if (value == 0) {
                        this.setRawValue("0");
                    }
                    else {
                        this.setRawValue(this.getFormattedValue(value));
                    }
    
                },
                getFormattedValue: function (value) {
                    if (value == null || value == '') {
                        return value;
                    }
                    else {
                        var neg = null;
                        value = this.removeFormat(value);
                        value = (neg = value < 0) ? value * -1 : value;
    
                        if (this.useThousandSeparator) {
                            value = value.toString();
    
                            var ps = value.split(Ext.util.Format.decimalSeparator);
    
                            if (ps[1] != undefined) {
                                if (ps[1].length > this.decimalPrecision)
                                    ps[1] = ps[1].substring(0, this.decimalPrecision);
                            }
    
                            var whole = ps[0];
    
                            var r = /(\d+)(\d{3})/;
    
                            var ts = ',';
    
                            while (r.test(whole))
                                whole = whole.replace(r, '$1' + ts + '$2');
    
                            value = whole + (ps[1] != undefined ? Ext.util.Format.decimalSeparator + ps[1] : '');
                        }
    
                        return Ext.String.format('{0}{1}{2}', (neg ? '-' : ''), (Ext.isEmpty(this.currencySymbol) ? '' : this.currencySymbol + ' '), value);
                    }
                },
                /**
                * overrides parseValue to remove the format applied by this class
                */
                parseValue: function (value) {
                    //Replace the currency symbol and thousand separator
                    if (value == 'N/A')
                        return null;
                    else {
                        return this.removeFormat(value);
                    }
    
                },
                //        /**
                //        * Remove only the format added by this class to let the superclass validate with it's rules.
                //        * @param {Object} value
                //        */
                onBlur: function () {
                    if (this.getRawValue() == null || this.getRawValue() == '')
                        this.setRawValue('N/A');
                },
                removeFormat: function (value) {
                    if (Ext.isEmpty(value) || !this.hasFormat())
                        return value;
                    else {
                        value = value.toString().replace(this.currencySymbol + ' ', '');
    
                        value = this.useThousandSeparator ? value.replace(new RegExp('[' + Ext.util.Format.thousandSeparator + ']', 'g'), '') : value;
                        console.log(value)
                        return value;
                    }
                },
                //        /**
                //        * Remove the format before validating the the value.
                //        * @param {Number} value
                //        */
                getErrors: function (value) {
                    return Ext.form.field.Number.superclass.getErrors.call(this, this.removeFormat(value));
                },
                hasFormat: function () {
                    return this.decimalSeparator != '.' || (this.useThousandSeparator == true && this.getRawValue() != null) || !Ext.isEmpty(this.currencySymbol) || this.alwaysDisplayDecimals;
                },
                //        /**
                //        * Display the numeric value with the fixed decimal precision and without the format using the setRawValue, don't need to do a setValue because we don't want a double
                //        * formatting and process of the value because beforeBlur perform a getRawValue and then a setValue.
                //        */
                onFocus: function () {
                    this.setRawValue(this.getRawValue().replace('N/A', ''));
    
                    this.callParent(arguments);
                }
            });
    
        </script>
        <title>StatusBar Advanced - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            .list {
                list-style-image: none;
                list-style-position: outside;
                list-style-type: square;
                padding-left: 16px;
            }
    
                .list li {
                    font-size: 11px;
                    padding: 3px;
                }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Panel
                runat="server"
                Title="StatusBar with Integrated Form Validation"
                Width="350"
                Height="220"
                Layout="Fit">
                <Items>
                    <ext:FormPanel
                        ID="StatusForm"
                        runat="server"
                        LabelWidth="75"
                        ButtonAlign="Right"
                        Border="false"
                        Padding="10">
                        <Defaults>
                            <ext:Parameter Name="Anchor" Value="95%" />
                            <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                            <ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
                            <ext:Parameter Name="MsgTarget" Value="side" />
                        </Defaults>
                        <Items>
                            <ext:TextField runat="server" FieldLabel="Name" BlankText="Name is required" />
                            <ext:DateField runat="server" FieldLabel="Birthdate" BlankText="Birthdate is required" />
                            <ext:NumberField runat="server" FieldLabel="Income" BlankText="Income is required" />
                        </Items>
                        <Buttons>
                            <ext:Button runat="server" Text="Save" Icon="Disk">
                                <DirectEvents>
                                    <Click
                                        OnEvent="FormSave"
                                        Before="var valid= #{StatusForm}.getForm().isValid(); if (valid) {#{FormStatusBar}.showBusy('Saving form...');} return valid;">
                                        <EventMask
                                            ShowMask="true"
                                            MinDelay="1000"
                                            Target="CustomTarget"
                                            CustomTarget="={#{StatusForm}.getEl()}" />
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Buttons>
                    </ext:FormPanel>
                </Items>
                <BottomBar>
                    <ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Ready">
                        <Plugins>
                            <ext:ValidationStatus
                                runat="server"
                                FormPanelID="StatusForm"
                                ValidIcon="Accept"
                                ErrorIcon="Exclamation" />
                        </Plugins>
                    </ext:StatusBar>
                </BottomBar>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by fendiyono; Apr 13, 2021 at 7:06 AM.
  2. #2
    Hello @fendiyono!

    It seems you misused the getErrors.call() syntax when you probably copypasted it from one of its occurrences in one of the Ext.NET overrides. You should wrap the parameters passed in an array, so:

    getErrors: function (value) {
        return Ext.form.field.Number.superclass.getErrors.call(this, [this.removeFormat(value)]);
    },
    But I'm not sure how correct that is, as I can't really get your overridden number field to fail validation no matter what I force-input on it.

    Hope this helps, nevertheless!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Thousand separator
    By adan in forum 2.x Help
    Replies: 2
    Last Post: Jan 25, 2016, 4:18 PM
  2. Replies: 25
    Last Post: Jan 29, 2014, 3:03 AM
  3. [CLOSED] Group separator property for number field
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 11, 2012, 4:26 PM
  4. [CLOSED] Thousand separator in number Field
    By FpNetWorth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 28, 2010, 1:01 PM
  5. [CLOSED] How to avoid using Thousand Separator in Coolite Number Field
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 02, 2010, 8:29 AM

Tags for this Thread

Posting Permissions