In this recipe, we will demonstrate how to use Ext JS' number field to enter numbers. The number field is an extended Spinner field and provides enhanced functionality to the user with very simple configuration.
The Spinner allows users to increase/decrease values by using the arrow buttons, the arrow keys on the keyboard, or by rotating the mouse wheel. Of course, it's also possible to turn these options off:
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' });
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 }], ... })...