EXTJSグリッドセル内でテキスト色を部分的に設定します

Question

ITSの一連のプロセスのステータスに関するEXTJS 4.2グリッド列（PHP MVC 3 Webサイトの一部として）を持っています。この列は、スペースで区切られたプロセスごとに3文字の3文字の略語を返します。皮をむいた。

しかしながら、所望の機能は、プロセスの all を検索し、それが完了したかどうかを示すために各エントリをスタイル化することであろう。具体例はWas Pre Cutであろうが、洗浄され用意されているがカットされない項目を表すであろう。

これは可能ですか？これは、プロセスごとに値と対応するスタイルフォーマットを文字列の代わりに配列オブジェクトとして渡し、セルのレンダラを介して希望のフォーマットを生成します。>

Answer 1

列レンダラは、HTMLを出力するランタイムを提供します。その機能の機能を過大評価することはほとんどできません...

私はあなたの問題が完全に理解しているのはよくわかりませんが、これがスターターの例です。考えられるプロセスのリストを考えると、各レコードのすべてのプロセスが表示され、このレコードのフラグが立てられているプロセスを強調表示します（例apumition fiddle）：

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 /＃フィドル/ 872