{
    xtype: 'numberfield'
    , autoCreate: { tag: 'input', type: 'number', maxlength: '3', min: '0' }
    // , width : 5
    , height: 22
    , minValue: ""
    , maxValue: 999
    , allowNegative: false
    // , selectOnFocus: true
    , disabled: true
    , id: this.ownerCt.id + '_relativeNumber'
    , width: 110
    , enableKeyEvents: true
    ,listeners: {
        scope: this,
        change: function (ele , e) {
        this.changeDropdown(this.ownerCt.id)
        },
        specialkey: function(field, e){
          // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN,
          // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN
          if (e.getKey() == e.ENTER) {
          var form = field.ownerCt.getForm();
          form.submit();
          }
          }
          }

          }

In extjs3,I used number field which extend text field and that number field have up and down arrow when click on arrow that time change event is not fire but when I do the same thing with keyboard and press tab then change event is fire. same scenario work in google and IE. ``` <pre><nowiki>{ xtype: 'numberfield' , autoCreate: { tag: 'input', type: 'number', maxlength: '3', min: '0' } // , width : 5 , height: 22 , minValue: "" , maxValue: 999 , allowNegative: false // , selectOnFocus: true , disabled: true , id: this.ownerCt.id + '_relativeNumber' , width: 110 , enableKeyEvents: true ,listeners: { scope: this, change: function (ele , e) { this.changeDropdown(this.ownerCt.id) }, specialkey: function(field, e){ // e.HOME, e.END, e.PAGE_UP, e.PAGE_DOWN, // e.TAB, e.ESC, arrow keys: e.LEFT, e.RIGHT, e.UP, e.DOWN if (e.getKey() == e.ENTER) { var form = field.ownerCt.getForm(); form.submit(); } } } }</nowiki></pre><br> ```