Configurando parcialmente a cor do texto em uma célula de grade ExtJS

Question

Eu tenho uma coluna de grade ExtJS 4.2 (como parte de um site PHP MVC 3) relacionada ao status de um conjunto de processos para itens.Esta coluna retorna uma sequência de abreviações de três letras por processo que foi concluído, separadas por espaços, por exemplo Was Pre Cut seria um item que foi lavado, preparado e cortado, e Was Scr Pee seria um item que foi lavado, esfregado e descascado.

No entanto, a funcionalidade desejada seria recuperar todos os processos e o estilo de cada entrada para mostrar se ela foi concluída;um exemplo seria <green>Was Pre</green> Cut denotaria um item que foi lavado e preparado, mas não cortado.

Isso é possível?Isso é algo em que passo os valores e os formatos de estilo correspondentes por processo como um objeto de matriz em vez de uma string e gero a formatação desejada por meio do renderizador da célula ou estou sendo otimista quanto à capacidade do renderizador de uma coluna da grade?

Answer 1

Um renderizador de coluna fornece um tempo de execução que gera HTML, você dificilmente poderia superestimar os recursos disso ...

Não tenho certeza se entendi completamente sua problemática, mas aqui está um exemplo inicial.Dada uma lista de processos possíveis, ele exibe todos os processos de cada registro e destaca os processos que estão sinalizados para este registro (exemplo violino):

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('');
        }
    }]
});

E estilize isso como quiser.Por exemplo:

.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 me bateu nisso.Ele está certo, você precisa trabalhar com a propriedade renderer para sua coluna.Eu criei um violino também caso você possa precisar ver outro exemplo: https://fiddle.sencha.com / # violino / 872