在 x 个字符后使用换行符调整 Line 的 TextArea

Question

在我们的 ExtJs5.1.2 项目中，我们希望有一个 textarea 用 换行符换行输入了 x 个字符.

例如当输入 12345 时，一行最多应有 5 个字符长，而当输入 6 时，文本区域中有一个带有 6 的新行。

12345
6

因此当用户连续输入文本时，文本会自动调整为 5 行长度。

我用下面的文本区域扩展试过了，但它没有按预期工作。函数 adaptLines 将值相应地格式化为 5 行长度，但它不会填充到文本区域本身。

Ext.define('LineAdaptTextField', {
    extend: 'Ext.form.field.TextArea',

    _removeNewLineRegEx: /\n/g,
    _lineAdaptRegEx: /(.{1,5})/g,

    // called when text is entered, but no effect of value in the textfield
    processRawValue: function(value) {
        value = this.callParent([value]);
        var processed = this.adaptLines(value);

        console.info('processRawValue("%s") to "%s"', value, processed);

        return processed;
    },

    // never be called when entering text
    transformRawValue: function(value) {
        value = this.callParent([value]);
        var transformed = this.adaptLines(value);

        console.info('transformRawValue("%s") to "%s"', value, transformed);

        return transformed;
    },

    // is called but no effect on the textfield
    valueToRaw: function (value) {
        value = this.callParent([value]);
        var rawValue = this.adaptLines(value);

        console.info('valueToRaw("%s") to "%s"', value, rawValue);

        return rawValue;
    },

    // never be called when entering text
    rawToValue: function (rawValue) {
        rawValue = this.callParent([rawValue]);
        var value = this.adaptLines(rawValue);

        console.info('valueToRaw("%s") to "%s"', rawValue, value);

        return value;
    },

    // add linefeed after 5 characters
    adaptLines: function(value){
        var noNewLines = value.replace(this._removeNewLineRegEx, '');
        return noNewLines.replace(this._lineAdaptRegEx, '\n').replace(/\n$/, '');
    }
});

要尝试这个问题，请参阅此 Fiddle。

Answer 1

此问题的解决方案之一是显式设置格式化值。例如（fiddle），可以利用变化事件：

listeners:{
    change: function ( field, newValue, oldValue, eOpts ){
        field.setValue(newValue);
    }
}

rawToValue 方法返回的值在 change 事件的 newValue 参数中可用。通过传递 newValueas 参数调用 setValue 方法将更新文本编辑器视图。

在 x 个字符后使用换行符调整 Line 的 TextArea

TextArea which adapts Line with Linebreak after x characters

extjs

extjs5