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