extjs3.4-moneyfield.js改写

在项目开发中,需要创建一个特定的金额输入框,该输入框要求长度为20位,包含两位小数点。通过自定义`moneyfield`组件,实现了当输入值展示为'123.456.00',鼠标选中复制时显示'123456'的功能。实现方式包括设置`xtype: 'moneyfield'`,并配置`maxLen`和`maxLength`属性为20。
摘要由CSDN通过智能技术生成

在做一个项目前台输入框是金额类型,要求长度为20位,并且有两位小数点.
想要的效果是输入后变成:123.456.00
当鼠标放上去复制时变成:123456
代码如下:

Ext.ux.MoneyField = Ext.extend(Ext.form.NumberField, {
    selectOnFocus : true,
    maxLen:null,
//  maxLengthText:null,
    style : {
        "text-align":"right"
    },
    onRender : function(ct, position){
        if(!Ext.isDefined(this.submitValue)){
            this.submitValue = false;
        }
        Ext.ux.MoneyField.superclass.onRender.call(this, ct, position);
        this.el.dom.removeAttribute('name');
        if(this.name){
            this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.name,
                    id: (this.hiddenId || Ext.id()),cpnid:this.id}, 'before', true);

        }
        if(Ext.isGecko){
            this.el.dom.setAttribute('autocomplete', 'off');
        }
    },
    initValue : function(){
        //根据maxLen给maxLength赋值
        if(this.maxLen!=null){
            //长度为maxLen的数值格式转化后含有几个分隔符
            var str="";
             for(var i=1;i<=this.maxLen;i++){
                 str=str+""+1;
             }           
            str = parseFloat(str);         
            str = Ext.util.Format.number(str,"0,000,000");
            this.maxLength=str.length;
        }    
        //console.log("$$$$$"+this.maxLength);
        Ext.ux.MoneyField.superclass.initValue.call(this);
        if(this.hiddenField){
            this.hiddenField.value =
                Ext.value(Ext.isDefined(this.hiddenValue) ? this.hiddenValue : this.value, '');
        }
    },
    onDestroy : function(){
        Ext.destroyMembers(this, 'hiddenField');
        Ext.ux.MoneyField.superclass.onDestroy.call(this);
    },
    /**
     * Runs all of NumberFields validations and returns an array of any errors. Note that this first
     * runs TextField's validations, so the returned array is an amalgamation of all field errors.
     * The additional validations run test that the value is a number, and that it is within the
     * configured min and max values.
     * @param {Mixed} value The value to get errors for (defaults to the current field value)
     * @return {Array} All validation errors for this field
     */
    getErrors: function(value) {
        var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);
        value = Ext.isDefined(value) ? value : this.processValue(this.getRawValue());

        if (value.length < 1) { // if it's blank and textfield didn't flag it then it's valid
             return errors;
        }

        value = String(value).replace(/,/g, "").replace(this.decimalSeparator, ".");

        if(isNaN(value)){
            errors.push(String.format(this.nanText, value));
        }

        var num = this.parseValue(value);

        if (num < this.minValue) {
            errors.push(String.format(this.minText, this.minValue));
        }

        if (num > this.maxValue) {
            errors.push(String.format(this.maxText, this.maxValue));
        }
        return errors;
    },
    parseValue : function(value) {
        value = parseFloat(String(value).replace(this.decimalSeparator, ".").replace(/,/g, ""));
        return isNaN(value) ? '' : value;
    },
    getValue : function() {
        return this.fixPrecision(this.parseValue(Ext.ux.MoneyField.superclass.getValue.call(this)));
    },

    setValue : function(v) {
        if(Ext.isEmpty(v)){
            v = "0.00";
        }
        if(Ext.isString(v)){
            v = parseFloat(v);
        }
        v = Ext.util.Format.number(v,"0,000,000");
        this.value = v;
        if(this.hiddenField){
            this.hiddenField.value = v.replace(/,/g,"");
        }

        return Ext.form.NumberField.superclass.setValue.call(this, v);
    },
    preFocus : function(){
        var el = this.el,
            isEmpty;
        if(this.emptyText){
            if(el.dom.value == this.emptyText){
                this.setRawValue('');
                isEmpty = true;
            }
            el.removeClass(this.emptyClass);
        }
        if(this.selectOnFocus || isEmpty){
//          el.dom.value = this.hiddenField.value.replace(/,/g,""); 
//            el.dom.select();
            el.dom.value = this.hiddenField.value.replace(/,/g,".");
        }
    }
});
Ext.reg('moneyfield', Ext.ux.MoneyField);

使用方法,如长度为20
-xtype:’moneyfiled’;
-maxLen:20;
-maxLength:20;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值