X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/form/field/Number.js diff --git a/src/form/field/Number.js b/src/form/field/Number.js index a0b6e22f..86cfe5cd 100644 --- a/src/form/field/Number.js +++ b/src/form/field/Number.js @@ -13,95 +13,93 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @class Ext.form.field.Number - * @extends Ext.form.field.Spinner - -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:# -{@img Ext.form.Number/Ext.form.Number1.png Ext.form.Number component} - 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# -{@img Ext.form.Number/Ext.form.Number2.png Ext.form.Number component} - 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# - 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); - } - } - }] - }); - - - * - * @markdown * @docauthor Jason Johnston + * + * 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', @@ -116,71 +114,79 @@ Ext.define('Ext.form.field.Number', { */ /** - * @cfg {Boolean} allowDecimals False to disallow decimal values (defaults to true) + * @cfg {Boolean} allowDecimals + * False to disallow decimal values */ allowDecimals : true, /** - * @cfg {String} decimalSeparator Character(s) to allow as the decimal separator (defaults to '.') + * @cfg {String} decimalSeparator + * Character(s) to allow as the decimal separator */ decimalSeparator : '.', /** - * @cfg {Number} decimalPrecision The maximum precision to display after the decimal separator (defaults to 2) + * @cfg {Number} decimalPrecision + * The maximum precision to display after the decimal separator */ decimalPrecision : 2, /** - * @cfg {Number} minValue The minimum allowed value (defaults to Number.NEGATIVE_INFINITY). Will be used by - * the field's validation logic, and for - * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}. + * @cfg {Number} minValue + * The minimum allowed value (defaults to Number.NEGATIVE_INFINITY). Will be used by the field's validation logic, + * and for {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the down spinner button}. */ minValue: Number.NEGATIVE_INFINITY, /** - * @cfg {Number} maxValue The maximum allowed value (defaults to Number.MAX_VALUE). Will be used by - * the field's validation logic, and for + * @cfg {Number} maxValue + * The maximum allowed value (defaults to Number.MAX_VALUE). Will be used by the field's validation logic, and for * {@link Ext.form.field.Spinner#setSpinUpEnabled enabling/disabling the up spinner button}. */ maxValue: Number.MAX_VALUE, /** - * @cfg {Number} step Specifies a numeric interval by which the field's value will be incremented or - * decremented when the user invokes the spinner. Defaults to 1. + * @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, /** - * @cfg {String} minText Error text to display if the minimum value validation fails (defaults to 'The minimum - * value for this field is {minValue}') + * @cfg {String} minText + * Error text to display if the minimum value validation fails. */ minText : 'The minimum value for this field is {0}', /** - * @cfg {String} maxText Error text to display if the maximum value validation fails (defaults to 'The maximum - * value for this field is {maxValue}') + * @cfg {String} maxText + * Error text to display if the maximum value validation fails. */ maxText : 'The maximum value for this field is {0}', /** - * @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 (defaults to '{value} is not a valid number') + * @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', /** - * @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. + * @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', /** - * @cfg {String} baseChars The base set of characters to evaluate as valid numbers (defaults to '0123456789'). + * @cfg {String} baseChars + * The base set of characters to evaluate as valid numbers. */ baseChars : '0123456789', /** - * @cfg {Boolean} autoStripChars True to automatically strip not allowed characters from the field. Defaults to false + * @cfg {Boolean} autoStripChars + * True to automatically strip not allowed characters from the field. */ autoStripChars: false, @@ -211,12 +217,11 @@ Ext.define('Ext.form.field.Number', { }, /** - * 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 {Mixed} value The value to get errors for (defaults to the current field value) - * @return {Array} All validation errors for this field + * 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, @@ -307,7 +312,6 @@ Ext.define('Ext.form.field.Number', { /** * @private - * */ fixPrecision : function(value) { var me = this,