为 ExtJS 表单字段使用渲染器

Question

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

我已经通过在网格列中使用渲染器成功地完成了这项工作，（Here's a fiddle) 但它看起来不像textfield 具有用于在基本表单中使用该字段的渲染器属性。我看过在rawToValue 和valueToRaw 方法中，但它们似乎并不是我想要的。有什么建议吗？

Answer 1

据我所知，表单字段不可能使用模板。这将需要翻转输入元素并在焦点和模糊上显示 div 或其他内容。这是可行的，但这意味着需要一些微调的 CSS。

更简单的选择是实现自定义valueToRaw 和rawToValue 方法，让Ext 处理值生命周期（这确实是复杂的部分）。您仍然需要更改焦点和模糊的 raw 值，但这仍然非常简单。

这是一个您可以构建的示例（请参阅fiddle）：

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;
        }
    }
});