Частично устанавливая цвет текста в ячейке сетки ExtJS

Question

У меня есть колонна сетки EXTJS 4.2 (в рамках веб-сайта PHP MVC 3), относящаяся к состоянию набора процессов для элементов.Этот столбец возвращает строку трехбуквенного сокращений на процесс, который был завершен, разделен пробелами, например Was Pre Cut будет предметом, который был промыт, подготовлен и вырезан, и Was Scr Pee будет предметом, который был промыт, вытирается иОчищенный.

Однако нужные функциональные возможности будут получать все процессы и стиль каждой записи, чтобы показать, было ли она завершено;ru Пример будет генеракодицетагкодом будет обозначать элемент, который был промыт и подготовлен, но не вырезан.

Это возможно?Это что-то, где я передаю значения и соответствующие форматы стилей на процесс в качестве объекта массива вместо строки, и генерировать желаемое форматирование с помощью рендерера ячейки, или я буду оптимистичным в отношении возможностей рендерера сетки?

Answer 1

Колонна рендерер дает вам время выполнения, которая выводит HTML, вы едва ли можете переоценить возможности этого ...

Я не уверен, что полностью понимаю ваш проблемный, но вот пример стартера.Учитывая список возможных процессов, он отображает все процессы для каждой записи, и выделяет процессы, которые помечены для этой записи ( Пример скрипки):

var processes = ['Foo', 'Bar', 'Baz', 'Bat']; // all available processes

new Ext.grid.Panel({
    renderTo: Ext.getBody()
    ,width: 400
    ,height: 200
    ,forceFit: true

    ,store: {
        fields: ['id', 'status', 'statusDetails']
        ,data: [
            {id: 1, status: 'Foo Bar', statusDetails: ['Foo', 'Bar']}
            ,{id: 2, status: 'Bar Baz', statusDetails: ['Bar', 'Baz']}
            ,{id: 3, status: 'Baz Bat', statusDetails: ['Baz', 'Bat']}
        ]
    }

    ,columns: [{
        dataIndex: 'id'
        ,text: "ID"
        ,width: 40
    },{
        dataIndex: 'status'
        ,text: "Status"
        ,renderer: function(value, md, record) {
            md.tdCls = 'processes-cell'; // gives us a hook for CSS
            return Ext.Array.map(processes, function(process) {
                var statusDetails = record.get('statusDetails');
                // possible alternative:
                // var statusDetails = record.get('status').split(' ');
                return '<div class="process ' + process + ' '
                + (statusDetails.indexOf(process) !== -1 ? 'on' : 'off')
                + '">' + process
                + '</div>';
            }).join('');
        }
    }]
});

.

и стиль, который к контенту вашего сердца.Например:

.processes-cell .process {
    display: inline-block;
    width: 25%;
    text-align: center;
    border: 1px solid white;
}
.processes-cell .process.off {
    background-color: lightpink;
}
.processes-cell .process.on {
    background-color: lightgreen;
}
.processes-cell .x-grid-cell-inner {
    padding: 1px;
}

.

Answer 2

Ha Yep Rixo избил меня к этому.Он правильно, вам нужно работать с свойством renderer для вашей колонки.Я создал скрипку, в случае, если вам может потребоваться увидеть другой пример: https://fiddle.sencha.COM / # DECLE / 872