Wie man CSS einer Gitterzelle einer Zeile in Extjs ändert 4.1.3

Question

Ich habe ein ExtJs Grid, dessen erste Zeile als temporäre Zeile verwendet wird. Im Raster sind bestimmte Spalten nicht editierbar. Ich möchte nicht editierbare Zellen der ersten Zeile (temporär) als nicht editierbar anzeigen. Da diese temporäre Reihe hat keine Werte, so wie diese Zellen als nicht editierbar zeigen (wie Vergrauung aus, dass die Zelle nur)

Wie im Bild ausgewählt, ich diese Zellen zeigen will, wie abgeblendet

Answer 1

Offensichtlich wird dies durch Anwendung einer CSS-Regel auf diese Elemente erreicht. Um auf die Spalte zu zielen, verwenden wir die Spaltenkonfiguration tdCls.

Ein CSS-Klassenname, der auf die Tabellenzellen für diese Spalte angewendet werden soll.

die Zeile Ziel, in der Regel die getRowClass Methode verwendet wird, aber in diesem diesem besonderen Fall, dass ich denke, das ist zuviel des Guten sein wird, weil es auf jeder Zeile des Gitters genannt wird, brauchen wir nur eine Klasse für die erste Reihe. Also denke ich, der Weg zu gehen ist, indem Sie die Klasse in der ersten Reihe auf Sicht viewready Ereignis hinzufügen.

Davon abgesehen, hier ist, wie die Lösung aussehen könnte. Fügen Sie einen tdCls für die benötigten Spalten:

{ 
    text: 'Serial', 
    dataIndex: 'serial', 
    tdCls: 'serial-column', 
    width: 200 
} 

eine Klasse der ersten Zeile hinzufügen:

viewConfig: { 
    listeners: { 
     viewready: function (view) { 
      Ext.get(view.getNode(0)).addCls('first-row'); 
     } 
    } 
} 

Dann bewerben Sie einfach die nötige Styling über CSS:

.first-row .serial-column { 
    background: #ccc; 
} 

Hier ist eine Arbeits Geige: https://fiddle.sencha.com/#view/editor&fiddle/26aq

PS Dies ist ein wirklich gutes Tutorial über das Styling von ExtJS-Gitterzellen: http://skirtlesden.com/articles/styling-extjs-grid-cells