Detail

ExtJS - dynamic column / grid cell styling

The styling for a grid cell can be changed depending on a value of the record. A column renderer is used to set the tdCls individually for each cell.

 

xt.create('Ext.grid.Panel', {

 

        ...

        columns: [

...

{

            header: 'Gender',

            dataIndex: 'gender',

            renderer: function(value, meta) {

                if (value == 'm') { 

                    meta.tdCls = 'male-cell'; 

                    return 'I am male.'; 

                } 

 

                meta.tdCls = 'female-cell'; 

                return 'I am female.'; 

            }

        }]


...

The corresponding CSS-classes would then look like:

 

.male-cell{ 

 

    background-color: red;

 

.female-cell{ 

    background-color: green;

}

You can find a JSFiddle to test  here .

Cookie-Einstellungen

Auch wir verwenden Cookies. Durch die weitere Nutzung unserer Website sind Sie mit der Verwendung dieser Cookies einverstanden. Darüber hinaus sind auf dieser Website Dienste anderer Dienstleister eingebunden. Dazu werden ebenfalls Cookies gesetzt, die sie jeder Zeit ändern können. Wir verwenden keine Cookies für Werbezwecke oder Social Media. Weitere Details: Datenschutzerklärung und Impressum

Details anzeigen

Name Cookie Dauer Zweck
eye-cookie Consent Cookie 10 Jahre Dieses Cookie speichert Informationen zum Verwalten Ihrer Cookie-Einstellungen für diese Webseite
Details anzeigen

Wir verwenden Dienste von Drittanbietern.

Name Cookie Dauer Zweck
Goolge Maps google-maps Google Maps Cookie
Google Recaptcha google-recaptcha
Google Analytics GA