/*
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
/**
* @class Ext.form.NumberField
* @extends Ext.form.TextField
* 数字型文本域,提供自动键击过滤和数字校验。
* @constructor
* 创建一个新的NumberField对象
* @param {Object} config 配置选项
*/
Ext.form.NumberField = function(config){
Ext.form.NumberField.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.NumberField, Ext.form.TextField, {
/**
* @cfg {String} fieldClass 设置该域的CSS,默认为x-form-field x-form-num-field
*/
fieldClass: "x-form-field x-form-num-field",
/**
* @cfg {Boolean} allowDecimals 值为 False时将不接受十进制值 (默认为true)
*/
allowDecimals : true,
/**
* @cfg {String} decimalSeparator 设置十进制数分割符(默认为 '.')(??指的大概是小数点)
*/
decimalSeparator : ".",
/**
* @cfg {Number} decimalPrecision 设置小数点后最大精确位数(默认为 2)
*/
decimalPrecision : 2,
/**
* @cfg {Boolean} allowNegative 值为 False时只允许为正数 (默认为 true,即默认允许为负数)
*/
allowNegative : true,
/**
* @cfg {Number} minValue 允许的最小值 (默认为 Number.NEGATIVE_INFINITY)
*/
minValue : Number.NEGATIVE_INFINITY,
/**
* @cfg {Number} maxValue 允许的最大值 (默认为Number.MAX_VALUE)
*/
maxValue : Number.MAX_VALUE,
/**
* @cfg {String} minText 最小值验证失败(ps:超出设置的最小值范围)时显示该错误信息(默认为"The minimum value for this field is {0}")
*/
minText : "The minimum value for this field is {0}",
/**
* @cfg {String} maxText 最大值验证失败(ps:超出设置的最大值范围)时显示该错误信息(默认为 "The maximum value for this field is {maxValue}")
*/
maxText : "The maximum value for this field is {0}",
/**
* @cfg {String} nanText 当值非数字时显示此错误信息。例如,如果仅仅合法字符如'.' 或 '-'而没有其他任何数字出现在该域时,会显示该错误信息。(默认为"{value} is not a valid number")
*/
nanText : "{0} is not a valid number",
// private
initEvents : function(){
Ext.form.NumberField.superclass.initEvents.call(this);
var allowed = "0123456789";
if(this.allowDecimals){
allowed += this.decimalSeparator;
}
if(this.allowNegative){
allowed += "-";
}
this.stripCharsRe = new RegExp('[^'+allowed+']', 'gi');
var keyPress = function(e){
var k = e.getKey();
if(!Ext.isIE && (e.isSpecialKey() || k == e.BACKSPACE || k == e.DELETE)){
return;
}
var c = e.getCharCode();
if(allowed.indexOf(String.fromCharCode(c)) === -1){
e.stopEvent();
}
};
this.el.on("keypress", keyPress, this);
},
// private
validateValue : function(value){
if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
return false;
}
if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
return true;
}
var num = this.parseValue(value);
if(isNaN(num)){
this.markInvalid(String.format(this.nanText, value));
return false;
}
if(num < this.minValue){
this.markInvalid(String.format(this.minText, this.minValue));
return false;
}
if(num > this.maxValue){
this.markInvalid(String.format(this.maxText, this.maxValue));
return false;
}
return true;
},
getValue : function(){
return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
},
// private
parseValue : function(value){
value = parseFloat(String(value).replace(this.decimalSeparator, "."));
return isNaN(value) ? '' : value;
},
// private
fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
return parseFloat(value).toFixed(this.decimalPrecision);
},
setValue : function(v){
Ext.form.NumberField.superclass.setValue.call(this, String(v).replace(".", this.decimalSeparator));
},
// private
decimalPrecisionFcn : function(v){
return Math.floor(v);
},
beforeBlur : function(){
var v = this.parseValue(this.getRawValue());
if(v){
this.setValue(this.fixPrecision(v));
}
}
});
分享到:
相关推荐
Ext.js 重写 numberfield 千分位,我的版本是ext.net2.4
### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...
5. `field`:`Ext.form.Field`是所有表单字段的基础类,提供了一般性的属性和方法,如验证和状态管理。 6. `fieldset`:`Ext.form.FieldSet`是用于组织和分组表单字段的容器,通常包含一个标题和可选的边框。 7. `...
49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext....
- **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...
defaultType: 'numberfield', //设置表单字段的默认类型 defaults:{ //统一设置表单字段默认属性 autoFitErrors : false, //展示错误信息时是否自动调整字段组件宽度 labelSeparator :':', //分隔符 ...
BoxComponent是Ext中的基本布局容器,可以用来控制子元素的位置和大小。通过调整BoxComponent的配置选项,开发者可以实现灵活的布局设计。 ##### 2. **Button(按钮组件)** Button组件是Web应用中最常见的交互...
4.7.5. 算不上校验的NumberField 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.2.1. 分裂,分列。1.x 4.8.2.2. 分裂,分列。2.0 4.8.3. fieldset是个神奇的东西 4.8.4...
9.2.2 ext.container.abstractcontainer和ext.container.container的配置项、属性、方法和事件 / 434 9.2.3 将body元素作为容器:ext.container.viewport / 435 9.3 面板 / 436 9.3.1 面板的结构 / 436 9.3.2 ...
* numberfield:一个数字字段组件,用于编辑数字。 * radio:一个单选框组件,用于选择某些选项。 * textarea:一个文本区域组件,用于编辑文本。 * timefield:一个时间选择器组件,用于选择时间。 * trigger:一个...
4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天,需要往...
dataIndex: 'numberField', editor: { xtype: 'spinnerfield', incrementValue: 10 // 设置每次增减的数值 } } ``` 通过这样的配置,我们便能够在`Grid`中享受到`Ext日期时间控件`和`Spinner控件`带来的交互性...
{header: 'Age', width: 100, dataIndex: 'age', editor: new Ext.form.NumberField()} ]); // 创建EditorGridPanel var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, title: '可编辑表格', ...
在这个例子中,`columns`数组包含了多个对象,每个对象代表一列,其中`editor`属性指定了该列的编辑器,如`TextField`(文本框)、`ComboBox`(下拉框)和`NumberField`(数字输入框)。 - `TextField`允许用户...
通过设置`gridview`的`plugins`属性,可以启用行拖动、行选择等扩展功能。 6. **自定义编辑器**:如果标准的编辑器不能满足需求,可以创建自定义的编辑器组件,通过`xtype`指定。 7. **样式和主题**:为了提供良好...
最后,通过实例化一个Ext.form.NumberField,并设置其unitText属性,就能在界面上显示出带有单位的数字输入框。在这个例子中,创建的NumberField用于输入金额,并设置了“元”作为单位。 通过上述步骤,我们就在...
49、Ext.form.TextField类 …………… 44 50、Ext.form.NumberField类 ………… 44 51、Ext.form.TextArea类 …………… 45 52、Ext.form.TriggerField类 ……… 45 53、Ext.form.DateField类 ………… 45 54、Ext....
- **NumberField**: `Ext.form.NumberField`,数字输入框。 - **Radio**: `Ext.form.Radio`,单选按钮。 - **TextArea**: 由于原文未提及,但这是一个常见的表单字段,用于多行文本输入。 #### 四、各功能组件...