Planning and coding the labeled spinner

To meet the functional requirements, we will create an extension class by extending the Ext JS's Ext.form.field.Spinner class from which we will get most of the facilities that we need to provide. We need to implement the onSpinUp and onSpinDown functions of the Ext.form.field.Spinner class to handle the spinner button click event to provide our logic to increase or decrease the values. By default, pressing the up and down arrow keys will also trigger the onSpinUp and onSpinDown methods. Now, let us start coding:

Ext.define('Examples.ux.LabeledSpinner', {
  extend : 'Ext.form.field.Spinner',
  alias : 'widget.labeledspinner',

  onSpinUp : function() {
    this.setValue(++this.value);
  },

  onSpinDown : function() {
    this.setValue(--this.value);
  }
});

And now we have a working extension that can increase or decrease its value. Here is the screenshot where we used this extension:

You can see that we now have a field with up/down spinner buttons...