TextArea在x字符

Question

在我们的 ExtJs5.1.2 项目中，我们想要一个 textarea ，在输入x个字符后用换行符打破这一行。

e.g。当在一行中输入12345时，行最多应为5个字符，当输入6时，在textarea中输入6的新行。

12345
6

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

12345
67890
12345
6...

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

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, '$1\n').replace(/\n$/, '');
    }
});

要尝试解决此问题，请参阅此Fiddle。

Answer 1

此问题的解决方案之一是明确设置格式化值。例如（fiddle），可以使用更改事件：

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

rawToValue方法返回的值在newValue事件的change参数中可用。通过传递setValue作为参数来调用newValue方法将更新texteditor视图。