Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sencha ExtJS 4.x, 5.x, 6.x Currency Component Field
<!--
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>

Sencha ExtJS 4.x, 5.x, 6.x Currency Component Field

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.

License.

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" />
@wencywww
Copy link

wencywww commented Jan 12, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment