web-dev-qa-db-ja.com

値の変更に応じてextjsグリッドの単一セルの背景色を変更するにはどうすればよいですか？

行全体の背景色を変更するには、getRowClassを使用できますが、1つのセルと特定の列に対してのみ同じロジックを実行する方法はありますか？...

_//EXTJS
viewConfig: {
    getRowClass: function(record, index) {
        var c = record.get('change');
        if (c < 0) {
            return 'price-fall';
        } else if (c > 0) {
            return 'price-rise';
        }
    }
}

//CSS
.price-fall { 
        background-color: #FFB0C4;
}
.price-rise {
        background-color: #B0FFC5;
}
_

編集：

これを行う方法があります：

_ function change(val){
    if(val > 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#B0FFC5;"><span style="color:green;">' + val + '</span></div>';
    }else if(val < 0){
        return '<div class="x-grid3-cell-inner" style="background-color:#FFB0C4;"><span style="color:red;">' + val + '</span></div>';
    }
    return val || 0;
}
_

そしてそれから：

_...
{header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change', align: 'center'}
...
_

しかし、この方法は、白から色付きの背景への変更でグリッドが変形します... ???

他のアイデアはありますか？

[〜＃〜] edit [〜＃〜]
カスタムcssを列に適用した後、短時間で同じcssを削除する方法は、値が変更されたときに blink のように見えるのですか？ setTimeout("remove-css()",1000);またはExt.Function.defer(remove-css, 1000);のようなもの
何か案は？

cssextjsgridextjs4row
22
Davor Zubak

必要な列に追加のclを適用してgetRowClassを使用することをお勧めします。

Ext.create('Ext.grid.Panel', {
    columns: [
        // ...
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' },
        // ...
    ],

    viewConfig: {
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    // ...
});

CSS：

.price-fall .x-change-cell {
    background-color: #FFB0C4;
    color:red;
}
.price-rise .x-change-cell {
    background-color: #B0FFC5;
    color:green;
}

デモ です。

35
Molecular Man

別のことをしているときに見つけた別の方法もあります。

列の定義：

{
    dataIndex: 'invoicePrintedFlag', 
    header: 'Fatura',
    width: 50,
    renderer : function(value, metadata, record) {
        if (record.get('invoiceAddressId') != null){
            metadata.tdCls = metadata.tdCls +" alertedCell";
        }

        return '<span class="iconbox icon-'+ value +'"></span>';
    }
}

セルを完全に操作する場合、rendererを使用できます。ここにmetadataがあります。

metadata: Object {tdCls: "", style: ""}

スタイルを使用すると、TD内のコンテンツDIVに追加されます

<td class=" x-grid-cell x-grid-cell-gridcolumn-1067" id="ext-gen1432">
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style=" text-align: left;" id="ext-gen1426">
    // Content comes here
    </div>
</td>

tdClsを使用すると、TDのクラスattrに追加されます

<td class=" x-grid-cell x-grid-cell-gridcolumn-1067   alertedCell " id="ext-gen1462">
    <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: left;" id="ext-gen1463">
    // Content comes here
    </div>
</td>

また、必要に応じてhtmlを返すこともできます。

11
efirat
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {

  metaData.tdAttr = 'style="background-color:#b0e987;color:black;"';

  value=Ext.util.Format.number(value, '$ 0,000.00');

  return value;

},
2
James