123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-form-field-Number'>/**
- </span> * @docauthor Jason Johnston <jason@sencha.com>
- *
- * A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters,
- * and numeric validation to limit the value to a range of valid numbers. The range of acceptable number
- * values can be controlled by setting the {@link #minValue} and {@link #maxValue} configs, and fractional
- * decimals can be disallowed by setting {@link #allowDecimals} to `false`.
- *
- * By default, the number field is also rendered with a set of up/down spinner buttons and has
- * up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the
- * {@link #step} value. To hide the spinner buttons set `{@link #hideTrigger hideTrigger}:true`; to disable
- * the arrow key and mouse wheel handlers set `{@link #keyNavEnabled keyNavEnabled}:false` and
- * `{@link #mouseWheelEnabled mouseWheelEnabled}:false`. See the example below.
- *
- * # Example usage
- *
- * @example
- * Ext.create('Ext.form.Panel', {
- * title: 'On The Wall',
- * width: 300,
- * bodyPadding: 10,
- * renderTo: Ext.getBody(),
- * items: [{
- * xtype: 'numberfield',
- * anchor: '100%',
- * name: 'bottles',
- * fieldLabel: 'Bottles of Beer',
- * value: 99,
- * maxValue: 99,
- * minValue: 0
- * }],
- * buttons: [{
- * text: 'Take one down, pass it around',
- * handler: function() {
- * this.up('form').down('[name=bottles]').spinDown();
- * }
- * }]
- * });
- *
- * # Removing UI Enhancements
- *
- * @example
- * Ext.create('Ext.form.Panel', {
- * title: 'Personal Info',
- * width: 300,
- * bodyPadding: 10,
- * renderTo: Ext.getBody(),
- * items: [{
- * xtype: 'numberfield',
- * anchor: '100%',
- * name: 'age',
- * fieldLabel: 'Age',
- * minValue: 0, //prevents negative numbers
- *
- * // Remove spinner buttons, and arrow key and mouse wheel listeners
- * hideTrigger: true,
- * keyNavEnabled: false,
- * mouseWheelEnabled: false
- * }]
- * });
- *
- * # Using Step
- *
- * @example
- * Ext.create('Ext.form.Panel', {
- * renderTo: Ext.getBody(),
- * title: 'Step',
- * width: 300,
- * bodyPadding: 10,
- * items: [{
- * xtype: 'numberfield',
- * anchor: '100%',
- * name: 'evens',
- * fieldLabel: 'Even Numbers',
- *
- * // Set step so it skips every other number
- * step: 2,
- * value: 0,
- *
- * // Add change handler to force user-entered numbers to evens
- * listeners: {
- * change: function(field, value) {
- * value = parseInt(value, 10);
- * field.setValue(value + value % 2);
- * }
- * }
- * }]
- * });
- */
- Ext.define('Ext.form.field.Number', {
- extend:'Ext.form.field.Spinner',
- alias: 'widget.numberfield',
- alternateClassName: ['Ext.form.NumberField', 'Ext.form.Number'],
- <span id='Ext-form-field-Number-cfg-stripCharsRe'> /**
- </span> * @cfg {RegExp} stripCharsRe
- * @private
- */
- <span id='Ext-form-field-Number-cfg-maskRe'> /**
- </span> * @cfg {RegExp} maskRe
- * @private
- */
- <span id='Ext-form-field-Number-cfg-allowDecimals'> /**
- </span> * @cfg {Boolean} allowDecimals
- * False to disallow decimal values
- */
- allowDecimals : true,
- //<locale>
- <span id='Ext-form-field-Number-cfg-decimalSeparator'> /**
- </span> * @cfg {String} decimalSeparator
- * Character(s) to allow as the decimal separator
- */
- decimalSeparator : '.',
- //</locale>
-
- //<locale>
- <span id='Ext-form-field-Number-cfg-submitLocaleSeparator'> /**
- </span> * @cfg {Boolean} [submitLocaleSeparator=true]
- * False to ensure that the {@link #getSubmitValue} method strips
- * always uses `.` as the separator, regardless of the {@link #decimalSeparator}
- * configuration.
- */
- submitLocaleSeparator: true,
- //</locale>
- //<locale>
- <span id='Ext-form-field-Number-cfg-decimalPrecision'> /**
- </span> * @cfg {Number} decimalPrecision
- * The maximum precision to display after the decimal separator
- */
- decimalPrecision : 2,
- //</locale>
- <span id='Ext-form-field-Number-cfg-minValue'> /**
- </span> * @cfg {Number} minValue
- * The minimum allowed value. Will be used by the field's validation logic,
- * and for {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}.
- *
- * Defaults to Number.NEGATIVE_INFINITY.
- */
- minValue: Number.NEGATIVE_INFINITY,
- <span id='Ext-form-field-Number-cfg-maxValue'> /**
- </span> * @cfg {Number} maxValue
- * The maximum allowed value. Will be used by the field's validation logic, and for
- * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}.
- *
- * Defaults to Number.MAX_VALUE.
- */
- maxValue: Number.MAX_VALUE,
- <span id='Ext-form-field-Number-cfg-step'> /**
- </span> * @cfg {Number} step
- * Specifies a numeric interval by which the field's value will be incremented or decremented when the user invokes
- * the spinner.
- */
- step: 1,
- //<locale>
- <span id='Ext-form-field-Number-cfg-minText'> /**
- </span> * @cfg {String} minText
- * Error text to display if the minimum value validation fails.
- */
- minText : 'The minimum value for this field is {0}',
- //</locale>
- //<locale>
- <span id='Ext-form-field-Number-cfg-maxText'> /**
- </span> * @cfg {String} maxText
- * Error text to display if the maximum value validation fails.
- */
- maxText : 'The maximum value for this field is {0}',
- //</locale>
- //<locale>
- <span id='Ext-form-field-Number-cfg-nanText'> /**
- </span> * @cfg {String} nanText
- * Error text to display if the value is not a valid number. For example, this can happen if a valid character like
- * '.' or '-' is left in the field with no number.
- */
- nanText : '{0} is not a valid number',
- //</locale>
- //<locale>
- <span id='Ext-form-field-Number-cfg-negativeText'> /**
- </span> * @cfg {String} negativeText
- * Error text to display if the value is negative and {@link #minValue} is set to 0. This is used instead of the
- * {@link #minText} in that circumstance only.
- */
- negativeText : 'The value cannot be negative',
- //</locale>
- <span id='Ext-form-field-Number-cfg-baseChars'> /**
- </span> * @cfg {String} baseChars
- * The base set of characters to evaluate as valid numbers.
- */
- baseChars : '0123456789',
- <span id='Ext-form-field-Number-cfg-autoStripChars'> /**
- </span> * @cfg {Boolean} autoStripChars
- * True to automatically strip not allowed characters from the field.
- */
- autoStripChars: false,
- initComponent: function() {
- var me = this,
- allowed;
- me.callParent();
- me.setMinValue(me.minValue);
- me.setMaxValue(me.maxValue);
- // Build regexes for masking and stripping based on the configured options
- if (me.disableKeyFilter !== true) {
- allowed = me.baseChars + '';
- if (me.allowDecimals) {
- allowed += me.decimalSeparator;
- }
- if (me.minValue < 0) {
- allowed += '-';
- }
- allowed = Ext.String.escapeRegex(allowed);
- me.maskRe = new RegExp('[' + allowed + ']');
- if (me.autoStripChars) {
- me.stripCharsRe = new RegExp('[^' + allowed + ']', 'gi');
- }
- }
- },
- <span id='Ext-form-field-Number-method-getErrors'> /**
- </span> * Runs all of Number's validations and returns an array of any errors. Note that this first runs Text's
- * validations, so the returned array is an amalgamation of all field errors. The additional validations run test
- * that the value is a number, and that it is within the configured min and max values.
- * @param {Object} [value] The value to get errors for (defaults to the current field value)
- * @return {String[]} All validation errors for this field
- */
- getErrors: function(value) {
- var me = this,
- errors = me.callParent(arguments),
- format = Ext.String.format,
- num;
- value = Ext.isDefined(value) ? value : this.processRawValue(this.getRawValue());
- if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
- return errors;
- }
- value = String(value).replace(me.decimalSeparator, '.');
- if(isNaN(value)){
- errors.push(format(me.nanText, value));
- }
- num = me.parseValue(value);
- if (me.minValue === 0 && num < 0) {
- errors.push(this.negativeText);
- }
- else if (num < me.minValue) {
- errors.push(format(me.minText, me.minValue));
- }
- if (num > me.maxValue) {
- errors.push(format(me.maxText, me.maxValue));
- }
- return errors;
- },
- rawToValue: function(rawValue) {
- var value = this.fixPrecision(this.parseValue(rawValue));
- if (value === null) {
- value = rawValue || null;
- }
- return value;
- },
- valueToRaw: function(value) {
- var me = this,
- decimalSeparator = me.decimalSeparator;
- value = me.parseValue(value);
- value = me.fixPrecision(value);
- value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
- value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
- return value;
- },
-
- getSubmitValue: function() {
- var me = this,
- value = me.callParent();
-
- if (!me.submitLocaleSeparator) {
- value = value.replace(me.decimalSeparator, '.');
- }
- return value;
- },
- onChange: function() {
- this.toggleSpinners();
- this.callParent(arguments);
- },
-
- toggleSpinners: function(){
- var me = this,
- value = me.getValue(),
- valueIsNull = value === null;
-
- me.setSpinUpEnabled(valueIsNull || value < me.maxValue);
- me.setSpinDownEnabled(valueIsNull || value > me.minValue);
- },
- <span id='Ext-form-field-Number-method-setMinValue'> /**
- </span> * Replaces any existing {@link #minValue} with the new value.
- * @param {Number} value The minimum value
- */
- setMinValue : function(value) {
- this.minValue = Ext.Number.from(value, Number.NEGATIVE_INFINITY);
- this.toggleSpinners();
- },
- <span id='Ext-form-field-Number-method-setMaxValue'> /**
- </span> * Replaces any existing {@link #maxValue} with the new value.
- * @param {Number} value The maximum value
- */
- setMaxValue: function(value) {
- this.maxValue = Ext.Number.from(value, Number.MAX_VALUE);
- this.toggleSpinners();
- },
- // private
- parseValue : function(value) {
- value = parseFloat(String(value).replace(this.decimalSeparator, '.'));
- return isNaN(value) ? null : value;
- },
- <span id='Ext-form-field-Number-method-fixPrecision'> /**
- </span> * @private
- */
- fixPrecision : function(value) {
- var me = this,
- nan = isNaN(value),
- precision = me.decimalPrecision;
- if (nan || !value) {
- return nan ? '' : value;
- } else if (!me.allowDecimals || precision <= 0) {
- precision = 0;
- }
- return parseFloat(Ext.Number.toFixed(parseFloat(value), precision));
- },
- beforeBlur : function() {
- var me = this,
- v = me.parseValue(me.getRawValue());
- if (!Ext.isEmpty(v)) {
- me.setValue(v);
- }
- },
- onSpinUp: function() {
- var me = this;
- if (!me.readOnly) {
- me.setValue(Ext.Number.constrain(me.getValue() + me.step, me.minValue, me.maxValue));
- }
- },
- onSpinDown: function() {
- var me = this;
- if (!me.readOnly) {
- me.setValue(Ext.Number.constrain(me.getValue() - me.step, me.minValue, me.maxValue));
- }
- }
- });
- </pre>
- </body>
- </html>
|