对ExtJS表单字段使用渲染器

Question

我正在尝试创建一个扩展textfield用于ExtJS表单的PercentField组件.我正在寻找的行为是字段显示百分比值,例如25%或400%,但是当用户正在编辑字段或提交的表单是小数时,具有基础值,例如.25或4.

我通过在网格列中使用渲染器成功地完成了这项工作,(这里是一个小提琴),但它看起来不像是textfield有一个渲染器属性,用于在基本形式中使用该字段.我看过这些rawToValue和valueToRaw方法,但它们似乎并不是我想要的.有什么建议？

Answer 1

据我所知,表单字段不可能有模板.这将需要翻转输入元素并在焦点和模糊时显示div或其他内容.这是可行的,但这意味着一些精细的CSS.

一个更简单的选择是实现自定义valueToRaw和rawToValue方法,并让Ext处理值生命周期(这实际上是复杂的部分).您仍然需要更改焦点和模糊的原始值,但这仍然非常简单.

这是你可以建立的一个例子(见小提琴):

Ext.define('My.PercentTextField', {
    extend: 'Ext.form.field.Text',

    onFocus: function() {
        this.callParent(arguments);
        var v = this.getValue();
        if (Ext.isNumeric(v)) {
            this.setRawValue(this.rawToValue(v));
        }
    },

    onBlur: function() {
        this.callParent(arguments);
        var v = this.getValue();
        if (Ext.isNumeric(v)) {
            this.setRawValue(this.valueToRaw(v));
        }
    },

    valueToRaw: function(v) {
        return Ext.isEmpty(v) 
            ? '' 
            : v * 100 + ' %';
    },

    rawToValue: function(v) {
        // cast to float
        if (!Ext.isEmpty(v)) {
            var pcRe = /^(\d*(?:\.\d*)?)\s*%$/,
                dcRe = /^\d*(?:\.\d*)?$/,
                precision = 2,
                floatValue,
                match;
            if (match = dcRe.test(v)) { // decimal input, eg. .33
                floatValue = v * 1;
            } else if (match = pcRe.exec(v)) { // % input, eg. 33 %
                floatValue = match[1] / 100;
            } else {
                // invalid input
                return undefined;
            }
            floatValue = Number.parseFloat(floatValue);
            if (isNaN(floatValue)) {
                return undefined;
            } else {
                return floatValue.toFixed(precision);
            }
        } else {
            return undefined;
        }
    }
});