Impostare parzialmente il colore del testo all'interno di una cella di griglia di Extjs

Question

Ho una colonna Grid Extjs 4.2 (come parte di un sito Web PHP MVC 3) relativo allo stato di un insieme di processi per gli articoli.Questa colonna restituisce una stringa di abbreviazioni a tre lettere per processo che è stata completata, separata dagli spazi, ad esempio Was Pre Cut sarebbe un oggetto che era stato lavato, preparato e tagliato e Was Scr Pee sarebbe un oggetto che era stato lavato, svuotato eSbucciato.

Tuttavia, la funzionalità desiderata sarebbe quella di recuperare tutto i processi e stile ciascuna voce per mostrare se fosse stato completato;IT Esempio sarebbe <green>Was Pre</green> Cut denotare un oggetto che è stato lavato e preparato ma non tagliato.

è possibile?È qualcosa in cui passerò i valori e i formati di stile corrispondenti per processo come oggetto array invece di una stringa e genera la formattazione desiderata tramite il rendero del cellulare, o sono ottimista sulla capacità del rendering della colonna di griglia?

Answer 1

A Column Renderer ti dà un runtime che in uscita HTML, potresti assolutamente sopravvalutare le funzionalità di questo ...

Non sono sicuro di capire completamente la tua problematica, ma ecco un esempio di avviamento.Dato un elenco di possibili processi, visualizza tutti i processi per ciascun record ed evidenziano i processi che sono contrassegnati per questo record ( Esempio di 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 stile che al contenuto del tuo cuore.Ad esempio:

.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

Ah Yep Rixo mi ha battuto.Ha ragione è necessario lavorare con la proprietà renderer per la tua colonna.Ho creato anche un violino nel caso in cui potresti aver bisogno di vedere un altro esempio: https://fiddle.Sencha.COM / # Fiddle / 872