TextArea, который адаптирует линию с LineBreak после й символов

Question

В нашем ExtJs5.1.2 проекта мы хотим иметь текстовую, который ломает линию с после перевода строки х символов вошли.

например. длина строки должна быть не более 5 символов при вводе 12345 времени пребывания на одной строке, а при вводе 6 новая строка с 6 находится в текстовом поле.

12345 
6 

Таким образом, когда пользователь непрерывно вводит текст, текст autoamtically адаптировано к длине линии 5.

12345 
67890 
12345 
6... 

Я попытался его следующим простираться в текстовое поле, но он не работает как и ожидалось. Функция 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, '$1\n').replace(/\n$/, ''); 
    } 
}); 

Для проверки проблемы см. Это Fiddle.

Answer 1

Одним из решений этой проблемы является прямое форматирование значения. Например (fiddle), можно использовать события изменения:

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

Значение, которое возвращается rawToValue методом, доступен в newValue параметра change события. Вызов метода setValue путем передачи аргумента newValue в качестве аргумента приведет к обновлению представления текстового редактора.