Utilize ValidationStatus on thousand separator number field

Threaded View

Previous Post Previous Post   Next Post Next Post
  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:	27 
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.

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