Entering numbers with a Spinner field

1. Create a form panel:
var formPanel = Ext.create('Ext.form.Panel', {
title: 'Spinner Field Example',
width: 350,
height: 100,
bodyPadding: 10,
defaults: {
labelWidth: 150
},
items: [],
renderTo: Ext.getBody(),
style: 'margin: 50px'
});

2. Add a number field to the form panel's items collection:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'numberfield',
fieldLabel: 'Card Expiry Date',
minValue: 2011,
maxValue: 2020
}],
...
});

3. Create a second number field and customize it with extra configuration:
var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'numberfield',
fieldLabel: 'Card Expiry Date',
minValue: 2011,
maxValue: 2020
}, {
xtype: 'numberfield',
fieldLabel: 'Weight (KG)',
minValue: -100,
maxValue: 100,
allowDecimals: true, //Default behaviour
decimalPrecision: 1,
step: 0.5
}],
...
});

var formPanel = Ext.create('Ext.form.Panel', {
...
items: [{
xtype: 'numberfield',
fieldLabel: 'Card Expiry Date',
minValue: 2011,
maxValue: 2020,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
}],
...
});