TextArea- die nach x Zeichen

Question

In unserem ExtJs5.1.2 Projekt Linie mit Zeilenumbruch paßt wollen wir ein TextArea- haben, die die Zeile mit einem Zeilenvorschub bricht nach x Zeichen eingegeben.

z.B. Die Zeile sollte max. 5 Zeichen lang sein, wenn 12345 eingegeben wird, bleibt in einer Zeile und bei Eingabe von 6 steht eine neue Zeile mit 6 im Textfeld.

12345 
6 

So, wenn der Benutzer kontinuierlich Text eingibt, wird der Text autoamtically zu einer Leitungslänge von 5.

12345 
67890 
12345 
6... 

angepasst Ich versuchte es mit der folgenden erweitern von dem Text, aber es funktioniert nicht wie erwartet. Die Funktion adaptLines formatiert den Wert entsprechend auf eine Zeilenlänge von 5, aber es wird nicht in den Textbereich selbst eingetragen.

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$/, ''); 
    } 
}); 

Für das Problem dieser Fiddle sehen auszuprobieren.

Answer 1

Eine der Lösungen für dieses Problem besteht darin, den formatierten Wert explizit festzulegen. Zum Beispiel (fiddle) kann man Gebrauch von Änderungsereignis machen:

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

Der Wert, der durch rawToValue Verfahren zurückgegeben wird, ist, in newValue Parametern change Veranstaltung. Rufen Sie die Methode setValue auf, indem Sie das Argument newValue als Argument übergeben, um die Texteditoransicht zu aktualisieren.