Zeilen mit Zeilenumbruch in Ext JS

Question

(Dies ist keine Frage per se, ich dokumentiere eine Lösung, die ich mit Ext JS 3.1.0 gefunden habe. Aber bitte antworten Sie, wenn Sie eine bessere Lösung kennen!)

die Spalte Config für ein Objekt Ext JS Grid hat keine native Möglichkeit Wort umwickelten Text zu ermöglichen, aber es gibt eine css Eigenschaft, um die Inline-CSS der TD Elemente durch das Raster erstellt außer Kraft zu setzen.

Leider enthalten die TD Elemente ein DIV Element den Inhalt Einwickeln, und dass DIV auf white-space:nowrap von Ext JS Sheet gesetzt, so dass die TD CSS überschreibt nicht gut ist.

Ich habe folgendes mein Haupt-CSS-Datei, eine einfache Lösung, dass jede Raster-Funktionalität nicht brechen erscheint, sondern ermöglicht es jedem white-space Einstellung I des TD gelten für die DIV passieren.

.x-grid3-cell { 
    /* TD is defaulted to word-wrap. Turn it off so 
     it can be turned on for specific columns. */ 
    white-space:nowrap; 
    } 

.x-grid3-cell-inner { 
    /* Inherit DIV's white-space from TD parent, since 
     DIV's inline style is not accessible in the column 
     definition. */ 
    white-space:inherit; 
    } 

YMMV, aber es funktioniert für mich, wollte sie sich als eine Lösung, um aus, da ich nicht eine funktionierende Lösung durch Durchsuchen des Interwebs finden konnte.

Answer 1

Keine "bessere Lösung", aber eine ähnliche. Ich musste vor kurzem zulassen, dass ALLE Zellen in jedem Raster umschlossen wurden. Ich habe einen ähnlichen CSS-basierten Update (dies ist für Ext JS war 2.2.1):

.x-grid3-cell-inner, .x-grid3-hd-inner { 
    white-space: normal; /* changed from nowrap */ 
} 

ich nicht mit der Einstellung einen Stil auf dem td störte, ging ich gerade richtig für die Zellklasse.

Answer 2

Wenn Sie den Wrapper nur auf eine Spalte anwenden möchten, können Sie einen benutzerdefinierten Renderer hinzufügen. Hier

ist die Funktion hinzuzufügen:

function columnWrap(val){ 
    return '<div style="white-space:normal !important;">'+ val +'</div>'; 
} 

Dann fügen Sie die renderer: columnWrap jeder Spalte Sie

new Ext.grid.GridPanel({ 
[...], 
columns:[{ 
    id: 'someID', 
    header: "someHeader", 
    dataIndex: 'someID', 
    hidden: false, 
    sortable: true, 
    renderer: columnWrap   
}] 

Answer 3

Wenn Sie nur Text wickeln in bestimmten Spalten wollen wickeln wollen und sind mit ExtJS 4, können Sie eine CSS-Klasse für die Zellen in einer Spalte angeben:

Und in y unsere CSS-Datei:

.wrap .x-grid-cell-inner { 
    white-space: normal; 
} 

Answer 4

Andere Lösung ist, dass:

columns : [ 
    { 
     header: 'Header', 
     dataIndex : 'text', 
     renderer: function(value, metaData, record, rowIndex, colIndex, view) { 
      metaData.style = "white-space: normal;"; 
      return value; 
     } 
    } 
] 

Answer 5

Der beste Weg, wie unten durch Setzen des cellWrap auf true zu tun ist.

cellWrap: true

Seine Arbeiten gut in EXTJS 5.0.

Answer 6

Verwendung

cellWrap: true 

Wenn Sie noch CSS verwenden, immer versuchen, mit ui an der Arbeit, Variablen, usw. innerhalb Themen oder den Stil mit der Stil-Eigenschaft festgelegt.