Wie mache ich mit ExtJS 4.2.1 einen Zeilenumbruch im Text eines Elements (Text, Label, displayField)?

Question

Muss einen Text anzeigen, der größer als die Komponente ist, in die er eingefügt wurde. Derzeit wird der Text nicht automatisch umbrochen.

Ich habe versucht, die folgenden Komponenten verwendet: Text, Etikett und Anzeigefeld

Answer 1

Haben Sie versucht, einen Text, der Leerraum enthält? Ein einzelnes Wort, das zu lang ist, wird nicht immer umbrochen, sondern es können mehrere kürzere, durch Leerzeichen getrennte Wörter verwendet werden, abhängig von der verwendeten Komponente.

Wenn Sie einen langen Text anzeigen möchten, verwenden Sie container und fügen Sie den Text in die html-Konfiguration ein, und es wird automatisch umgebrochen.

Die Komponenten, die Sie genannt haben auch ihre Nutzung, aber nicht für eine einfachen Langtext:

• text sind aus dem draw Paket, und gut für spezielle Formatierung.
• displayfield ist in einem Formular gut, wenn Sie (schreibgeschützt) einen Wert anzeigen möchten, der Teil des Datensatzes ist, den Sie in das Formular laden. displayfield wird nicht umgebrochen - versuchen Sie textareafield mit readonly Konfiguration dafür.
• label ist gut als die Bezeichnung eines Formularfelds, aber nur wenn über die labelable Mixin verwendet, die meisten der Arbeit. A label sollte seinen Inhalt umbrechen lassen, wenn Sie eine feste Breite oder maxWidth angeben, aber es wird nicht automatisch an das Layout des übergeordneten Objekts angepasst.

Answer 2

Sie einfach Stile extjs Komponenten hinzufügen können (Sie irgendwelche von ihnen verwenden können):

word-wrap: break-word; 

Es gibt einige Möglichkeiten, benutzerdefinierte CSS-Stile zu ext der Elemente

style: { 
    "word-wrap": 'break-word' 
} 

anzuwenden 210

Auch können Sie dies tun:

Ext.get('txtElement').setStyle('word-wrap', 'break-word');