Clear Up
SharpKit Reference

Number Class

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 minValue and maxValue configs, and fractional decimals can be disallowed by setting 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 step value. To hide the spinner buttons set hideTrigger:true; to disable the arrow key and mouse wheel handlers set keyNavEnabled:false and mouseWheelEnabled:false. See the example below.

Example usage

  
    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

  
    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);
            }
            }
            }]
            });
            

Namespace: Ext.form.field

Constructors

Fields

Name Description
allowDecimals False to disallow decimal values Defaults to: true
autoStripChars True to automatically strip not allowed characters from the field. Defaults to: false
baseChars The base set of characters to evaluate as valid numbers. Defaults to: "0123456789"
decimalPrecision The maximum precision to display after the decimal separator Defaults to: 2
decimalSeparator Character(s) to allow as the decimal separator Defaults to: "."
maxText Error text to display if the maximum value validation fails. Defaults to: "The maximum value for this field is {0}"
maxValue The maximum allowed value. Will be used by the field's validation logic, and for enabling/disabling the up spinner button. Defaults to Number.MAX_VALUE.
minText Error text to display if the minimum value validation fails. Defaults to: "The minimum value for this field is {0}"
minValue The minimum allowed value. Will be used by the field's validation logic, and for enabling/disabling the down spinner button. Defaults to Number.NEGATIVE_INFINITY.
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: "{0} is not a valid number"
negativeText Error text to display if the value is negative and minValue is set to 0. This is used instead of the minText in that circumstance only. Defaults to: "The value cannot be negative"
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
submitLocaleSeparator False to ensure that the getSubmitValue method strips always uses . as the separator, regardless of the decimalSeparator configuration. Defaults to: true

Methods

Name Description
setMaxValue(JsNumber) Replaces any existing maxValue with the new value.
setMinValue(JsNumber) Replaces any existing minValue with the new value.
© Copyright 2005-2011 SharpKit. All rights reserved.