Extjs通过Columns的renderer属性给单元格设置背景色

最新推荐文章于 2019-07-10 11:12:38 发布

Knuth1989

最新推荐文章于 2019-07-10 11:12:38 发布

阅读量1.7k

点赞数

分类专栏： extjs 文章标签： extjs

本文链接：https://blog.csdn.net/hanlanshenlan/article/details/77717495

版权

extjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

想要实现图片中的效果：
最终实现的效果

主要代码：
view

Ext.define('MyApp.view.MyGridPanelMuniDesk', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.mygridpanelmunidesk',

    id: 'munideskTab',
    margin: 1,
    collapsible: true,
    title: 'MUNI Desk Risk',
    forceFit: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
             viewConfig: {
                 enableTextSelection:true,
             },
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'book',
                    text: ''
                },
                {
                    xtype: 'numbercolumn',
                    align: 'right',
                    dataIndex: 'pv01lim',
                    text: 'PV01 Limit',
                    format: '0,000'
                },
                {
                    xtype: 'numbercolumn',
                    align: 'right',
                    dataIndex: 'pv01curr',
                    text: 'Curr PV01',
                    renderer : CurrPV01Change,
                    format: '0,000'
                },
                {
                    xtype: 'numbercolumn',
                    align: 'right',
                    dataIndex: 'lmvlim',
                    text: 'LMV Limit',
                    format: '0,000'
                },
                {
                    xtype: 'numbercolumn',
                    align: 'right',
                    dataIndex: 'lmvcurr',
                    text: 'Curr LMV',
                    renderer : LMVChange,
                    format: '0,000'
                },
                {
                    xtype: 'numbercolumn',
                    align: 'right',
                    dataIndex: 'smvlim',
                    text: 'SMV Limit',
                    format: '0,000'
                },
                {
                    xtype: 'numbercolumn',
                    align: 'right',
                    dataIndex: 'smvcurr',
                    text: 'Curr SMV',
                    renderer : SMVChange,
                    format: '0,000'
                }
            ]
        });

        me.callParent(arguments);
    }

});

css:

.x-grid-cell.changered
{
    background-color: red;
}
.x-grid-cell.changeyellow
{
    background-color: yellow;
}

renderer : SMVChange:

//Make the "Curr SMV" cell  background color red if the "Curr SMV" value >= "Shutdown SMV" value
function SMVChange(value, cellmeta, record, rowIndex, columnIndex, store)  { 
    if (value!=0 && record.data["smvlim"]!="undefined" &&  value >= record.data.smvlim) { 
        cellmeta.tdCls="changered";
        return '<span style="color:white;">' + Ext.util.Format.number(value,'0,000') + '</span>'; 
    } else { 
        return '<span>' + Ext.util.Format.number(value,'0,000') + '</span>'; 
    } 
}

PS:function SMVChange(value, cellmeta, record, rowIndex, columnIndex, store) ，参数需要按照顺序写，刚开始不知道写成function SMVChange(value,record) ，结果报错:
Uncaught TypeError: Cannot read property ‘style’ of undefined