A numeric text field that provides automatic keystroke filtering to disallow non-numeric characters, and numeric validation to limit the value to a range of valid numbers.(数据字段提供了自动过滤键盘输入的非数据字符，和数据校验限制在合法数据的范围中。) The range of acceptable number values can be controlled by setting the minValue and maxValue configs, and fractional decimals can be disallowed by setting allowDecimals to false.(可以设置minValue和maxValue属性控制可接受数据的范围，通过设置allowDecimals为false限制小数输入)

By default, the number field is also rendered with a set of up/down spinner buttons and has up/down arrow key and mouse wheel event listeners attached for incrementing/decrementing the value by the step value. (默认情况下，数据字段提供了一组上下转换的按钮和上下箭头按键和鼠标轮滚事件监听器控制数据的步进来递增和递减数值。)To hide the spinner buttons set hideTrigger:true; to disable the arrow key and mouse wheel handlers set keyNavEnabled:false and mouseWheelEnabled:false. (要隐藏上下转换按钮可以设置hideTrigger为true，要取消上下键事件和鼠标滚动事件可以设置keyNavEnabled为false和设置mouseWheelEnabled为false。)See the example below.(看下面的例子。)

 numberfield.html

 
  
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>HELLO WORD</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="numberfield3.js"></script> 
  9. </head> 
  10. <body> 
  11. </body> 
  12. </html> 
 
  
numberfield.js
 
  
 
  
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.  
  4.         Ext.create('Ext.form.Panel', { 
  5.                 title: 'On The Wall', 
  6.                 width: 300, 
  7.                 bodyPadding: 10, 
  8.                 renderTo: Ext.getBody(), 
  9.                 items: [{ 
  10.                     xtype: 'numberfield', 
  11.                     anchor: '100%', 
  12.                     name: 'bottles', 
  13.                     fieldLabel: 'Bottles of Beer', 
  14.                     value: 99, 
  15.                     maxValue: 99, 
  16.                     minValue: 0 
  17.                }], 
  18.                buttons: [{ 
  19.                    text: 'Take one down, pass it around', 
  20.                    handler: function() { 
  21.                      this.up('form').down('[name=bottles]').spinDown(); 
  22.                    } 
  23.               }] 
  24.           }); 
  25.  
  26.  
  27.     }); 
  28. })(); 
 
  
numberfield2.js
 
  
 
  
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.  
  4.         Ext.create('Ext.form.Panel', { 
  5.                 title: 'Personal Info', 
  6.                 width: 300, 
  7.                 bodyPadding: 10, 
  8.                 renderTo: Ext.getBody(), 
  9.                 items: [{ 
  10.                     xtype: 'numberfield', 
  11.                     anchor: '100%', 
  12.                     name: 'age', 
  13.                     fieldLabel: 'Age', 
  14.                     minValue: 0, //prevents negative numbers 
  15.  
  16.                    // Remove spinner buttons, and arrow key and mouse wheel listeners 
  17.                    hideTrigger: true, 
  18.                    keyNavEnabled: false, 
  19.                    mouseWheelEnabled: false 
  20.                 }] 
  21.             }); 
  22.  
  23.  
  24.     }); 
  25. })(); 
 
  
numberfield3.js
 
  
 
  
  1. (function(){ 
  2.     Ext.onReady(function(){ 
  3.  
  4.         Ext.create('Ext.form.Panel', { 
  5.                 renderTo: Ext.getBody(), 
  6.                 title: 'Step', 
  7.                 width: 300, 
  8.                 bodyPadding: 10, 
  9.                 items: [{ 
  10.                     xtype: 'numberfield', 
  11.                     anchor: '100%', 
  12.                     name: 'evens', 
  13.                     fieldLabel: 'Even Numbers', 
  14.  
  15.                     // Set step so it skips every other number 
  16.                     step: 2, 
  17.                     value: 0, 
  18.  
  19.                   // Add change handler to force user-entered numbers to evens 
  20.                  listeners: { 
  21.                      change: function(field, value) { 
  22.                          value = parseInt(value, 10); 
  23.                          field.setValue(value + value % 2); 
  24.                      } 
  25.                 } 
  26.               }] 
  27.             }); 
  28.  
  29.  
  30.     }); 
  31. })(); 
 
  
11111