Как изменить цвет строки в datagrid на основе серьезности?

Как изменить цвет строки в datagrid на основе условия серьезности? Я новичок в этой теме EXTJS. Я читал читателю, чтобы хранить и писать для записи данных. После извлечения всех данных в сетку, как я могу изменить цвет строки в datagrid на основе условия серьезности? Можете ли вы мне объяснить, что код работает?

Ответ 1

вы можете использовать класс GridView (Ext.grid.GridView) для управления пользовательским интерфейсом сетки. Вы также можете использовать свойство viewConfig GridPanel. Вот пример:

viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    }

ps: Пример, взятый из самой документации документации ExtJS

Снижение цен и рост цен - это CSS, которые имеют соответствующие цвета фона. например:

.price-fall { 
 background-color: #color;
}

.price-rise {
 background-color: #color;
}

Ответ 2

Вы можете сделать это с помощью метода getRowClass GridView (см. Ext JS API).

Пример из документа API:

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},

Ответ 3

Вы можете использовать средство рендеринга для своего столбца из своей модели столбца, а затем назначить класс css следующим образом:

поэтому, функция customRenderer:

function customRenderer(value, metaData, record, rowIndex, colIndex, store) {
    var opValue = value;
    if (value === "Rejected") {
        metaData.css = 'redUnderlinedText';
    } else if (value === "Completed") {
        metaData.css = 'greenUnderlinedText';
    } else if (value === "Started") {
        metaData.css = 'blueUnderlinedText';
    }
    return opValue;

} `

И затем ваша колонка:

        {
            header: 'Your Column Header',
            dataIndex: 'your_data_index',
            renderer: customRenderer
        }

Тогда ваш css может быть таким:

.redUnderlinedText {
    background-color: blue,
    color: red;
    text-decoration: underline;
    cursor: pointer;
}