Establecer parcialmente el color del texto dentro de una celda de cuadrícula ExtJS

Question

Tengo una columna de cuadrícula ExtJS 4.2 (como parte de un sitio web PHP MVC 3) relacionada con el estado de un conjunto de procesos para elementos.Esta columna devuelve una cadena de abreviaturas de tres letras por proceso que se ha completado, separadas por espacios, por ejemplo Was Pre Cut Sería un artículo que había sido lavado, preparado y cortado, y Was Scr Pee Sería un artículo que había sido lavado, fregado y pelado.

Sin embargo, la funcionalidad deseada sería recuperar todo los procesos y diseñar cada entrada para mostrar si se había completado;un ejemplo seria <green>Was Pre</green> Cut denotaría un artículo que ha sido lavado y preparado pero no cortado.

es posible?¿Es esto algo en lo que paso los valores y los formatos de estilo correspondientes por proceso como un objeto de matriz en lugar de una cadena, y genero el formato deseado a través del procesador de celdas, o estoy siendo optimista acerca de la capacidad del procesador de columnas de una cuadrícula?

Answer 1

Un renderizador de columnas le brinda un tiempo de ejecución que genera HTML, difícilmente podría sobreestimar las capacidades de eso...

No estoy seguro de entender completamente su problema, pero aquí hay un ejemplo inicial.Dada una lista de posibles procesos, muestra todos los procesos para cada registro y resalta los procesos que están marcados para este registro (ejemplo de violín):

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

Y dale estilo a tu gusto.Por ejemplo:

.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

Ja, sí, Rixo se me adelantó.Tiene razón, necesitas trabajar con el renderer propiedad para su columna.También creé un violín en caso de que necesites ver otro ejemplo: https://fiddle.sencha.com/#fiddle/872