Как покрасить EXTJS 6.2 современной сеткой


Я столкнулся с проблемой. Я создаю современное приложение EXTJ 6.2 с архитектором Sencha 4.1. Я использую компонент сетки в моей панели с магазином, загруженным сервером. Я хотел бы раскрасить строки в соответствии с имеющимися у меня данными.

В классике это выполнимо с 

viewConfig: {
  forceFit: true,  
  getRowClass: function(record, rowIndex, p, store) { 
     //some if statement here  
}

Я попробовал это по-современному, но это не работает. Кто-нибудь знает другой способ или взломать, что я мог бы сделать цвет строк? Или в лучшем случае хотя бы поменяйте один цвет фона.

Я действительно хотел бы избежать использования списка, если это возможно.

Спасибо аги

Источник

3 ответа

Решение

В современном вы можете использовать itemConfig для настройки Ext.grid.Row,

Добавьте приведенный ниже код к скрипке Сенчи:

 Ext.application({
name : 'Fiddle',

launch : function() {
    var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", color: "blue"  },
    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", color: "green" },
    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244", color: "yellow" },
    { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", color: "red" }
]
});

Ext.create('Ext.grid.Grid', {
title: 'Simpsons',

variableHeights: true,

store: store,

itemConfig: {
    listeners: {
        painted: function (row) {
            var record = row.getRecord();
            var color = record.get('color');

            row.setStyle('background: '+color)

            //if (color == 'red')
                //row.setStyle('background: red');
        }
    }
},

columns: [
    { 
        text: 'Name',  
        dataIndex: 'name', 
        minWidth: 200, 
        //flex: 1,
        //cellWrap: true,
        cell: {
            bodyStyle: {
                whiteSpace: 'normal'
            }
        }
    },
    { 
        text: 'Email', 
        dataIndex: 'email', 
        flex: 2, 
        minWidth: 250 

    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1,  
        minWidth: 120
    },
    {
        text: 'Color',
        dataIndex: 'color',
        flex: 1
    }
],

//height: 200,
//layout: 'fit',
fullscreen: true
});
}
});

Часть itemConfig - это то, что сделает свое дело.

Источник

Я обнаружил, что ни одно из решений, предложенных в принятом ответе, не работает для меня. Решение с использованием окрашенного обработчика событий работает только при первой загрузке. Если данные обновляются, стиль не меняется, поэтому строки по-прежнему окрашиваются в соответствии с исходными данными. Решение для рендеринга громоздко, если у вас большое количество столбцов или вы хотите иметь несколько рендереров.

Для тех, кто в той же лодке, вот мое решение:

      itemConfig: {
    viewModel: true,
    bind: {
        cls: '{record.IsEnabled === false ? "disabled" : ""}'
    }
}
Источник

Чтобы раскрасить строку, следующий код не мог работать в моем проекте

itemConfig: {
    listeners: {
        painted: function(row) {
            var record = row.getRecord();
        }
    }
}

row.getRecord не работает (getRecord() не распознается как функция)

Мне удалось раскрасить строку из ячейки

columns: [{
    text: 'Name',
    dataIndex: 'name',
    width: 150,
    sortable: true,
    renderer: function(v, record, dataIndex, cell) {
        var row = cell.up();
        row.setStyle('background: ' + record.get('color') + ';');
        return v;
    }
}]
Источник
Другие вопросы по тегам