ExtJS number field that allows for zero padding. Useful for displaying hours/minutes selectors.

PaddedNumber.js

Ext.define('p7_ui_static.view.field.PaddedNumber', {
  extend: 'Ext.form.field.Number',
  alias: 'widget.paddednumberfield',

  /**
   * @cfg {Number} zeroPadding
   * Number of digits to pad
   * Defaults to 2
   */
  zeroPadding: 2,

  initComponent: function(){
    this.callParent();
  },

  /*
  * @private
  * Gets value from superclass
  * TODO: Need to convert anything here? Hmm
  */
  rawToValue: function(rawValue) {
    var value = this.callParent([rawValue]);
    return  value;
  },

  /**
  * @private
  * Gets raw value from superclass then append zero padding
  */
  valueToRaw: function(value) {
    value = this.callParent([value]);
    if(this.zeroPadding){
      value = Ext.String.leftPad(value, this.zeroPadding, '0');
    }
    return value;
  },
  
  /**
  * @private
  * Gets submit value from superclass then removes zero padding
  */
  getSubmitValue: function() {
    var value = this.callParent();
    if(this.zeroPadding && typeof(value) == 'string'){
      value = value.replace(/^0+/g, '');  
    }
    return value;
  }
});