| <!-- | |
| A simple custom Sencha ExtJS 4.x, 5.x, 6.x component to show correctly formatted currency values on an input box with increment/decrement spinner. | |
| Has the xtype 'currencyfield'. | |
| When the user is editing the value, the currency symbol is hidden until the edit is complete. | |
| --> | |
| <body> | |
| <span class="caption">Sencha ExtJS 4.x, 5.x, 6.x Custom Currency Field Component</span> | |
| </body> |
| // Currency Component | |
| Ext.define('CurrencyField', { | |
| extend: 'Ext.form.field.Number', | |
| alias: ['widget.currencyfield'], | |
| currency: '£', //change to the symbol you would like to display. | |
| listeners: { | |
| render: function(cmp) { | |
| cmp.showCurrency(cmp); | |
| }, | |
| blur: function(cmp) { | |
| cmp.showCurrency(cmp); | |
| }, | |
| focus: function(cmp) { | |
| cmp.setRawValue(cmp.valueToRaw(cmp.getValue())); | |
| } | |
| }, | |
| showCurrency: function(cmp) { | |
| cmp.setRawValue(Ext.util.Format.currency(cmp.valueToRaw(cmp.getValue()), cmp.currency, 2, false)); | |
| }, | |
| valueToRaw: function(value) { | |
| return value.toString().replace(/[^0-9.]/g, ''); | |
| }, | |
| rawToValue: function(value) { | |
| return Ext.util.Format.round(this.valueToRaw(value), 2); | |
| } | |
| }); | |
| // END Currency Component | |
| // Demo component in a form panel. | |
| Ext.create('Ext.form.Panel', { | |
| title: 'Currency Component', | |
| width: 300, | |
| bodyPadding: 10, | |
| renderTo: Ext.getBody(), | |
| items: [{ | |
| xtype: 'currencyfield', | |
| anchor: '100%', | |
| name: 'testPrice', | |
| fieldLabel: 'Price', | |
| value: 99, | |
| step: 0.1 | |
| }] | |
| }); |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script> |
A simple custom Sencha ExtJS 4.x, 5.x, 6.x component to show correctly formatted currency values on an input box with increment/decrement spinner. Has the xtype 'currencyfield'. When the user is editing the value, the currency symbol is hidden until the edit is complete.
A Pen by Brian Barnett on CodePen.
| body { | |
| padding: 20px calc(50% - 150px); | |
| background: linear-gradient(-90deg, #D9E6F6, #BAD0EE); | |
| } | |
| span.caption { | |
| position: fixed; | |
| right: 25px; | |
| bottom: 25px; | |
| font-size: 24px; | |
| color: #637599; | |
| font-famil: 'Lato', Helvetica, Arial, sans-serif; | |
| } |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" /> |
Hi, this is very neat.
However, i faced a small problem when the currencyfield is configured with autoStripChars: true.
You can take a look at this fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/1o1h
To reproduce, run the fiddle, then edit the field value (using the keyboard, not the spinner) and click outside the field - you should see the formatting is removed.