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>
效果圖: