Zeilengitterzellen in Ext JS einschließen

(Dies ist nicht per se eine Frage, ich bin dokumentieren eine Lösung, die ich gefunden mit Ext JS 3.1.0. Aber, fühlen Sie sich frei, zu beantworten, wenn Sie wissen, dass sich eine bessere Lösung!)

Der Spalte config für eine Ext JS Grid-Objekt keine native Möglichkeit, word-wrapped text, aber es ist ein css Eigenschaft überschreiben Sie die inline-CSS der TD Elementen durch das raster.

Leider die TD Elemente enthalten eine DIV - element Verpackung, den Inhalt, und dass DIV eingestellt ist white-space:nowrap von Ext JS-stylesheet, so dass das überschreiben der TD CSS tut nicht gut.

Ich habe Folgendes in meinem Haupt-CSS-Datei, eine einfache Lösung, die erscheintum nicht zu brechen alle grid-Funktionalität, sondern ermöglicht es jedem white-space Einstellung ich anwenden, um den TD zu Durchlaufen, um die DIV.

.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 es als Lösung, da ich nicht finden konnte eine funktionierende Lösung durch eine Suche im Internet herum.

InformationsquelleAutor der Frage richardtallent | 2010-01-21

  1. 18

    Nicht eine "bessere Lösung" ist, aber eine ähnliche. Vor kurzem habe ich benötigt, damit ALLE Zellen in jedem grid zu wickeln. Ich verwendete eine ähnliche CSS-basiert beheben (dies war für Ext JS 2.2.1):

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

    Ich habe nicht die Mühe mit der Einstellung, ein Stil für die td, ich ging direkt für den cell-Klasse.

    InformationsquelleAutor der Antwort Jonathan Julian

  2. 73

    Wenn Sie nur wollen, wenden Sie die Verpackung zu einer Spalte, können Sie einen benutzerdefinierten renderer.

    Hier ist die Funktion zum hinzufügen:

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

    Dann fügen Sie die renderer: columnWrap für jede Spalte, die Sie möchten, wickeln

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

    InformationsquelleAutor der Antwort Jack Kleinman

  3. 13

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

    {
    text: 'My Column',
    dataIndex: 'data',
    tdCls: 'wrap'
}

    Und in der CSS-Datei:

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

    InformationsquelleAutor der Antwort CTarczon

  4. 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;
        }
    }
]

    InformationsquelleAutor der Antwort Tiago Sippert

  5. 1

    Der beste Weg, dies zu tun ist durch die Einstellung der cellWrap zu wahren, wie unten beschrieben.

    cellWrap: true

    Seine arbeiten auch in EXTJS 5.0.

    InformationsquelleAutor der Antwort Augustine Joseph

  6. 1

    verwenden

    cellWrap: true

    Wenn Sie wollen immer noch den Einsatz von css immer versuchen, mit ui ' s, Variablen, etc. innerhalb der Themen, oder stellen Sie den Stil mit dem Stil-Eigenschaft.

    InformationsquelleAutor der Antwort Tarabass

Schreibe einen Kommentar