[CLOSED] Formatting Number Decimal & thousand seperator

**FpNetWorth** · Jan 03, 2011, 2:27 PM

Hi,

Is it possible to have thousands Separator in a numeric Field
in case of TextField i m using this code but i want the format without currency is it possible?


<ext:TextField ID="TextField1" runat="server" MaskRe="/[0-9\.]/">
                   <Listeners>
                       <Change Handler="el.setValue(Ext.util.Format.usMoney(newValue.replace(/[$]/g, '')));" />
                   </Listeners>
               </ext:TextField>

i have also tried using

<Change Handler="this.setValue(Ext.util.Format.number(newV alue.replace(/[\,\.]/g, ''), '0.000));" />

but it didn't work !
how can i get the format 1,234,456.89 using the number format?

**Daniil** · Jan 03, 2011, 2:58 PM

Hi,

Please look at the example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TextField ID="TextField1" runat="server" MaskRe="/[0-9\.]/">
        <Listeners>
            <Change Handler="this.setValue(Ext.util.Format.number(newValue.replace(/[,]/g, ''), '0,0.00'));" />
        </Listeners>
    </ext:TextField>
    </form>
</body>
</html>

**geoffrey.mcgill** · Jan 03, 2011, 3:01 PM

Hi FpNetWorth,

I looked up the Ext.util.Format.number function in the documentation and I believe the format you require is "0,0.00".

0,000.00 - (123,456.78) show comma and digits, 2 precision
0,0.00 - (123,456.78) shortcut method, show comma and digits, 2 precision

More info

http://dev.sencha.com/deploy/dev/doc...&member=number

**FpNetWorth** · Jan 03, 2011, 3:47 PM

Hi ,
thank you for your help but i m getting an error for

 <ext:TextField ID="TextField2" runat="server" MaskRe="/[0-9\.]/">
                    <Listeners>
                        <Change Handler="this.setValue(Ext.util.Format.number(newValue.replace(/[,]/g, ''), '0,0.00'));" />
                    </Listeners>
                </ext:TextField>

Message: Object doesn't support this property or method

while

 <ext:TextField ID="TextField1" runat="server" MaskRe="/[0-9\.]/">
                    <Listeners>
                        <Change Handler="el.setValue(Ext.util.Format.usMoney(newValue.replace(/[$]/g, '')));" />
                    </Listeners>
                </ext:TextField>

is working
Any Help Thank you in advance !!!
N.B:I m using version 0.8

**Daniil** · Jan 03, 2011, 4:24 PM

Hi,

Please always specify toolkit's version in an initial post, especially, if this differs from Ext.Net 1.0.

Well, there is no .number() method in Ext.util.Format class in ExtJS 2.X which is used in Coolite 0.8.X.
http://dev.sencha.com/deploy/yui-ext...xt.util.Format (this is in Coolite 0.8.2).

So, you could apply code from ExtJS 3.X. It can look something like this:

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Coolite 0.8.x Example</title>
    
    <ext:ScriptContainer runat="server" />
    <script type="text/javascript">
        Ext.num = function (v, defaultValue) {
            v = Number(Ext.isEmpty(v) || Ext.isArray(v) || typeof v == 'boolean' || (typeof v == 'string' && v.trim().length == 0) ? NaN : v);
            return isNaN(v) ? defaultValue : v;
        }
    
        Ext.util.Format.number = function(v, format) {
            if (!format) {
                return v;
            }
            v = Ext.num(v, NaN);
            if (isNaN(v)) {
                return '';
            }
            var comma = ',',
                dec = '.',
                i18n = false,
                neg = v < 0;

            v = Math.abs(v);
            if (format.substr(format.length - 2) == '/i') {
                format = format.substr(0, format.length - 2);
                i18n = true;
                comma = '.';
                dec = ',';
            }

            var hasComma = format.indexOf(comma) != -1,
                psplit = (i18n ? format.replace(/[^\d\,]/g, '') : format.replace(/[^\d\.]/g, '')).split(dec);

            if (1 < psplit.length) {
                v = v.toFixed(psplit[1].length);
            } else if (2 < psplit.length) {
                throw ('NumberFormatException: invalid format, formats should have no more than 1 period: ' + format);
            } else {
                v = v.toFixed(0);
            }

            var fnum = v.toString();

            psplit = fnum.split('.');

            if (hasComma) {
                var cnum = psplit[0],
                    parr = [],
                    j = cnum.length,
                    m = Math.floor(j / 3),
                    n = cnum.length % 3 || 3,
                    i;

                for (i = 0; i < j; i += n) {
                    if (i != 0) {
                        n = 3;
                    }

                    parr[parr.length] = cnum.substr(i, n);
                    m -= 1;
                }
                fnum = parr.join(comma);
                if (psplit[1]) {
                    fnum += dec + psplit[1];
                }
            } else {
                if (psplit[1]) {
                    fnum = psplit[0] + dec + psplit[1];
                }
            }

            return (neg ? '-' : '') + format.replace(/[\d,?\.?]+/, fnum);
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ScriptManager runat="server" />
    <ext:TextField runat="server" MaskRe="/[0-9\.]/">
        <Listeners>
            <Change Handler="this.setValue(Ext.util.Format.number(newValue.replace(/[,]/g, ''), '0,0.00'));" />
        </Listeners>
    </ext:TextField>
    </form>
</body>
</html>

See also
http://dev.sencha.com/deploy/dev/doc...&member=number
http://dev.sencha.com/deploy/dev/doc...Ext&member=num

**hemantpatil** · Feb 26, 2013, 10:36 AM

Originally Posted by Daniil

Hi,

Please look at the example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TextField ID="TextField1" runat="server" MaskRe="/[0-9\.]/">
        <Listeners>
            <Change Handler="this.setValue(Ext.util.Format.number(newValue.replace(/[,]/g, ''), '0,0.00'));" />
        </Listeners>
    </ext:TextField>
    </form>
</body>
</html>

Hi Daniil,

i want the same functionality as per above quote (format number in textfield).
this works fine except (ex. i type 15) whenever i type/input first number it gets formatted as 1.00 and next number is places after 1.005.
may be this is cause we are formatting it in change event.
i want to apply the same functionality on blur of the textfield.
can you please help me in this regard.

**Vladimir** · Feb 26, 2013, 11:25 AM

Try to set CheckChangeEvents="blur" for TextField

**Vladimir** · Feb 26, 2013, 11:26 AM

Sorry but what Ext.Net version do you use? CheckChangeEvents is available in v2 only (in v1 Change event is fired on blur only)

**hemantpatil** · Feb 26, 2013, 12:03 PM

Originally Posted by Vladimir

Sorry but what Ext.Net version do you use? CheckChangeEvents is available in v2 only (in v1 Change event is fired on blur only)

Hi Vladimir,

Thanks for the reply. i tried your suggestion, but no luck. below is sample code snippet for your reference. i m using Ext.Net v2.

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:TextField ID="TextField1" runat="server" MaskRe="/[0-9\.]/" CheckChangeEvents="['blur']">
        <Listeners>
            <Change Handler="this.setValue(Ext.util.Format.number(newValue.replace(/[,]/g, ''), '0,0.00'));" />
        </Listeners>
    </ext:TextField>
    </form>
</body>
</html>

**Vladimir** · Feb 26, 2013, 12:06 PM

Please try as I suggested

CheckChangeEvents="blur"

Thread: [CLOSED] Formatting Number Decimal & thousand seperator

Thread Tools

Search Thread

Display

[CLOSED] Formatting Number Decimal & thousand seperator

Similar Threads

[CLOSED] Thousand separator in number Field

[CLOSED] How to avoid using Thousand Separator in Coolite Number Field

How to format a number with 3 decimal

Decimal seperator in gridpanel based on language settings

[CLOSED] How to format a decimal number...

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Formatting Number Decimal & thousand seperator

[CLOSED] Formatting Number Decimal & thousand seperator

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us