ändern der Hintergrundfarbe von grid-Zeilen dynamisch in extjs 4.2.2

Ich habe meine grid-lädt eine Liste von Daten, und einige der Daten sollten ändern Sie den hintergrund-Wert zu einem bestimmten Zeitpunkt Wert. Wenn das Datum kleiner ist als das heutige Datum, es sollte mit der css-Klasse 'jetzt', sonst 'später'.
Es funktioniert gut, aber mein problem ist, dass nur eine Zeile ändern der Hintergrundfarbe, damit es nicht durch die ganze Liste.

heres my grid:

grid = Ext.create('Ext.grid.Panel', {
                store: store,
                xtype: 'gridpanel',
                columns: [
                    { text: 'Name', dataIndex: 'name', tdCls: 'x-grid-cell' }
                ],
                stripeRows: false,
                viewConfig: {
                    getRowClass: function(record, index) {

                    var date = Ext.Date.parse(record.get('reminderDate'),"c").valueOf();
                    var today = Ext.Date.parse(Ext.Date.format(new Date(), 'Y-m-d'), "c").valueOf();

                    return today < date ? 'later' : 'now'

                }                    
            },
            renderTo: Ext.getBody()
      });

edit:

Den backgroudn Farben änderungen nur auf die oberste Zeile im raster, der rest bleibt unverändert. jedoch, die getrowclass ruft jeden Zeile.

CSS:

.later .x-grid-cell {
        background-color: #FFB0C4;
    }
.now .x-grid-cell {
        background-color: #5491BD;
    }
  • Sagen Sie getRowClass wird nicht aufgerufen, für jede Zeile, oder, dass die Hintergrundfarbe für jede Zeile, ist nicht zu ändern?
  • es heißt für jede Zeile. die bg Farbe ist nicht zu ändern für jede Zeile
  • Dann ist es vermutlich ein Problem mit deinem css.
  • Ich fügte hinzu, die css-Datei.
InformationsquelleAutor Paparis | 2014-02-17
  1. 5

    Herausgefunden, was das Problem war.

    Weil ich mich mit einem Thema, das hatte ich, um die benutzerdefinierte CSS-Datei, bevor Sie die standard ExtJS CSS mit "!wichtig" - flag.

    Neuen css-Datei:

    .later .x-grid-cell {
        background-color: #FFB0C4 !important;
    }
.now .x-grid-cell {
        background-color: #5491BD !important;
    }
    InformationsquelleAutor Paparis
  2. 0

    Art von spät, aber für die Aufzeichnung, in ExtJs 6.6.0, in Fall, dass Sie erhalten wollen, schweben und Auswahl der hintergrund-Farben finden Sie unter dieser sencha fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2p5c.

    Hier ist der code:

    Ext.application({
        name: 'Fiddle',

        launch: function () {
            Ext.create('Ext.data.Store', {
                storeId: 'simpsonsStore',
                fields: ['name', 'email', 'phone'],
                data: [{
                    name: 'Lisa',
                    email: '[email protected]',
                    phone: '555-111-1224'
                }, {
                    name: 'Bart',
                    email: '[email protected]',
                    phone: '555-222-1234'
                }, {
                    name: 'Homer',
                    email: '[email protected]',
                    phone: '555-222-1244'
                }, {
                    name: 'Marge',
                    email: '[email protected]',
                    phone: '555-222-1254'
                }]
            });

            Ext.create('Ext.grid.Panel', {
                title: 'Simpsons',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }, {
                    text: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    text: 'Phone',
                    dataIndex: 'phone'
                }],
                height: 200,
                width: 400,
                renderTo: Ext.getBody(),
                viewConfig: {
                    getRowClass: function (record, rowIndex, rowParams, store) {
                        //console.log(record);
                        //if (this.isSelected(record))
                        //    return '';
                        return (record.get('name') == 'Lisa') ? 'redBackground' : '';
                    }
                },

                //features: [{
                //    ftype: 'rowbody',
                //    getAdditionalData: function (data, idx, record, orig) {
                //        //Use the data/record to determine which class to apply, then
                //        //style the row body in CSS.
                //        //console.log(data);
                //        //console.log(record);
                //        console.log(orig);
                //        //if (data.name == 'Lisa')
                //        //    return {
                //        //        rowBodyCls: "redBackground"
                //        //    };
                //        return orig;
                //    }
                //}]
            });
        }
    });

    Stil:

    .x-grid-item:not(.x-grid-item-selected):not(.x-grid-item-over) .redBackground .x-grid-cell {
    background-color: #ffe6e6;
}
    InformationsquelleAutor costa
Schreibe einen Kommentar