`
mamingyaoqian
  • 浏览: 5712 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

ext NumberField 基本属性注释

阅读更多
/*
* 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.js 重写 numberfield 千分位,我的版本是ext.net2.4

    Ext.form表单中各种属性应用详解

    ### Ext.form表单中各种属性应用详解 #### 1. Ext.form.NumberField **Ext.form.NumberField** 是 **Ext.form.TextField** 的一个扩展,它专为处理数字输入而设计,提供了一系列与数值相关的配置选项。 - **...

    EXT.form组件

    5. `field`:`Ext.form.Field`是所有表单字段的基础类,提供了一般性的属性和方法,如验证和状态管理。 6. `fieldset`:`Ext.form.FieldSet`是用于组织和分组表单字段的容器,通常包含一个标题和可选的边框。 7. `...

    EXT核心API详解

    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....

    Ext组件描述,各个组件含义

    - **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    defaultType: 'numberfield', //设置表单字段的默认类型 defaults:{ //统一设置表单字段默认属性 autoFitErrors : false, //展示错误信息时是否自动调整字段组件宽度 labelSeparator :':', //分隔符 ...

    Ext组件说明 Ext组件概述

    BoxComponent是Ext中的基本布局容器,可以用来控制子元素的位置和大小。通过调整BoxComponent的配置选项,开发者可以实现灵活的布局设计。 ##### 2. **Button(按钮组件)** Button组件是Web应用中最常见的交互...

    EXT2.0中文教程

    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...

    Ext Js权威指南(.zip.001

    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 ...

    Ext中xtype和vtype.

    * numberfield:一个数字字段组件,用于编辑数字。 * radio:一个单选框组件,用于选择某些选项。 * textarea:一个文本区域组件,用于编辑文本。 * timefield:一个时间选择器组件,用于选择时间。 * trigger:一个...

    Ext 开发指南 学习资料

    4.7.5. 算不上校验的NumberField 4.7.6. 使用后台返回的校验信息 4.8. 关于表单内部控件的布局问题 4.8.1. 什么都不做,默认的平铺布局 4.8.2. 分裂,分列 4.8.3. fieldset是个神奇的东西 4.8.4. 当某一天,需要往...

    Ext日期时间控件 Spinner控件 Ext代码 Extjs Grid

    dataIndex: 'numberField', editor: { xtype: 'spinnerfield', incrementValue: 10 // 设置每次增减的数值 } } ``` 通过这样的配置,我们便能够在`Grid`中享受到`Ext日期时间控件`和`Spinner控件`带来的交互性...

    可编辑表格Ext.grid.EditorGridPanel

    {header: 'Age', width: 100, dataIndex: 'age', editor: new Ext.form.NumberField()} ]); // 创建EditorGridPanel var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, title: '可编辑表格', ...

    ext可编辑表格

    在这个例子中,`columns`数组包含了多个对象,每个对象代表一列,其中`editor`属性指定了该列的编辑器,如`TextField`(文本框)、`ComboBox`(下拉框)和`NumberField`(数字输入框)。 - `TextField`允许用户...

    extjs editgrid示例代码

    通过设置`gridview`的`plugins`属性,可以启用行拖动、行选择等扩展功能。 6. **自定义编辑器**:如果标准的编辑器不能满足需求,可以创建自定义的编辑器组件,通过`xtype`指定。 7. **样式和主题**:为了提供良好...

    Extjs NumberField后面加单位实现思路

    最后,通过实例化一个Ext.form.NumberField,并设置其unitText属性,就能在界面上显示出带有单位的数字输入框。在这个例子中,创建的NumberField用于输入金额,并设置了“元”作为单位。 通过上述步骤,我们就在...

    ExtJS入门教程(超级详细)

    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....

    Extjs实用教程

    - **NumberField**: `Ext.form.NumberField`,数字输入框。 - **Radio**: `Ext.form.Radio`,单选按钮。 - **TextArea**: 由于原文未提及,但这是一个常见的表单字段,用于多行文本输入。 #### 四、各功能组件...

Global site tag (gtag.js) - Google Analytics