文本區域，其在X字符

Question

在我們ExtJs5.1.2項目，斷行線相適應，我們希望有一個textarea的，打破了換行的行之後X輸入的字符。

例如行在輸入12345時最多需要5個字符長度，並且在輸入6時在textarea中輸入6的新行。

12345 
6 

因此，當用戶連續地輸入文本，文本被autoamtically適於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方法返回的值，是在change事件的newValue參數可用。通過傳遞newValue作爲參數調用setValue方法將更新texteditor視圖。