Wie fügt man in ExtJS eine benutzerdefinierte CSS-Klasse zu Datenrasterzeilen hinzu?

Die Vorgehensweise besteht darin, viewConfig im Raster zu definieren:

In Ihrem initComponent() Ihrer Ext.grid.Panel verwenden Sie getRowClass() wie folgt:

Dies überschreibt im Grunde die Funktion getRowClass() des zugrundeliegenden Ext.grid.View , die zur Renderzeit aufgerufen wird, um benutzerdefinierte Klassen anzuwenden. Dann würde Ihre benutzerdefinierte CSS-Datei etwa Folgendes enthalten:

Sie könnten so etwas tun:

Natürlich könnten Sie den Aufruf getRow() für eine andere Zelle ersetzen, oder Sie könnten alle Zeilen durchgehen und sie entsprechend hinzufügen.

Und dann könntest du das zusätzlich zum Standard-CSS stylen, indem du Folgendes tust:

Es gibt auch eine private Methode von GridView namens addRowClass . Sie können damit auch eine Klasse zu Ihren Zeilen hinzufügen:

grid.getView().addRowClass(rowId, 'myClass');

Verwenden Sie den einfachsten Weg

In Ihrem Grid verwenden -

cls: 'myRowClass'

Dein CSS -

.myRowClass .x-grid-cell {Hintergrund: # FF0000! wichtig; }

Wenn Sie die Klasse nach dem Laden der Daten ändern möchten, können Sie das folgendermaßen tun:

Hier ist rowIndex die ausgewählte Zeile, die Sie in einigen Event-Funktionen (wie "select") erhalten können. Mit diesem können Sie das CSS der Zeile ändern, nachdem Sie darauf geklickt haben.