Définition partielle de la couleur du texte dans une cellule de grille ExtJS

Question

J'ai une colonne de grille ExtJS 4.2 (dans le cadre d'un site Web PHP MVC 3) relative à l'état d'un ensemble de processus pour les éléments.Cette colonne renvoie une chaîne d'abréviations de trois lettres par processus terminé, séparées par des espaces, par exemple Was Pre Cut serait un article qui avait été lavé, préparé et coupé, et Was Scr Pee serait un article qui avait été lavé, frotté et pelé.

Cependant, la fonctionnalité souhaitée serait de récupérer tous les processus et stylisez chaque entrée pour montrer si elle a été terminée ;un exemple serait <green>Was Pre</green> Cut désignerait un article qui a été lavé et préparé mais non coupé.

Est-ce possible?Est-ce quelque chose où je transmets les valeurs et les formats de style correspondants par processus en tant qu'objet de tableau au lieu d'une chaîne, et génère le formatage souhaité via le moteur de rendu de la cellule, ou suis-je optimiste quant à la capacité du moteur de rendu d'une colonne de grille ?

Answer 1

Un moteur de rendu de colonnes vous offre un moteur d'exécution qui génère du HTML, vous ne pourriez guère surestimer ses capacités...

Je ne suis pas sûr de bien comprendre votre problématique, mais voici un exemple de démarrage.Étant donné une liste de processus possibles, il affiche tous les processus pour chaque enregistrement et met en évidence les processus marqués pour cet enregistrement (exemple de violon):

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

Et stylisez-le à votre guise.Par exemple:

.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 ouais, Rixo m'a devancé.Il a raison, tu dois travailler avec le renderer propriété pour votre colonne.J'ai également créé un violon au cas où vous auriez besoin de voir un autre exemple : https://fiddle.sencha.com/#fiddle/872