1、Ext.form.field.Number主要配置項
| 配置項 | 類型 | 說明 |
|---|---|---|
| allowDecimals | Boolean | 是否允許輸入小數，默認為true |
| autoStripChars | Boolean | 是否過濾不允許輸入的字符，默認為false |
| baseChars | String | 輸入的有效數字集合，默認為“0123456789” |
| decimalPrecision | Number | 輸入數字的精度，默認為保留小數點后2位 |
| decimalSeparator | String | 十進制分隔符，默認為“.” |
| maxValue | Number | 允許輸入的最大數值，默認為Number.MAX_VALUE |
| maxText | String | 輸入超過最大值之后提示消息 |
| minValue | Number | 允許輸入的最小值，默認為Number.NEATIVE_INFINTY |
| minText | String | 輸入值小於最小值的提示消息 |
| nanText | String | 輸入非有效數值之后的提示消息 |
| negativeText | String | 當輸入為負數，且minValue設置為0時的錯誤提示 |
| step | Number | 設置提供微調按鈕增大或減小數值時的數字間隔，默認為1 |
2、Ext.form.field.Number示例
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.field.Field.FormPanel示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.QuickTips.init(); var frm = new Ext.form.FormPanel({ title: "Ext.field.Field.FormPanel示例", bodyStyle: "padding:5", renderTo: Ext.getBody(), frame: true, height: 150, width: 270, defaultType: "numberfield", defaults: [{ labelSeparator: "：", labelWidth: 60, width: 200, labelAlign: "left", magTarget: "side" }], items: [{ fieldLabel: "整數", hideTrigger: true, // 隱藏微調按鈕 allowDecimals: false, // 不允許輸入小數 nanText: "請輸入有效的整數" }, { fieldLabel: "小數", decimalPrecision: 2, // 精確地小數點后兩位 allowDecimals: true, nanText: "請輸入有效的小數" }, { fieldLabel: "數字限制", baseChars: "12345" }, { fieldLabel: "數值限制", maxValue: 100, // 最大值 minValue: 50 // 最小值 }] }); }); </script> </head> <body> </body> </html>
效果圖：
