extjs 根据值更改网格单元格背景

Posted 2023-02-21

【中文标题】extjs 根据值更改网格单元格背景

【英文标题】：extjs change grid cell background based on value

【发布时间】：2013-11-23 03:23:31

【问题描述】：

我将渲染器应用于我的网格列， 但背景颜色没有改变：

renderer: function(value, meta) 
    if (parseInt(value) > 0) 
        meta.tdCls = 'category-matching'; return value;
    
    else  
        meta.tdCls = 'category-not-matching'; return value;
    

css:

.x-grid-cell .category-matching 
    background-color:green;

.x-grid-cell .category-not-matching 
    background-color:red;

我也试过

.grid-cell-inner

和

background-color:red; !important

但没有效果。

有什么想法吗？

【参考方案1】：

试试

.x-grid-cell.category-matching 
    background-color:green;

.x-grid-cell.category-not-matching 
    background-color:red;

【讨论】：

另外，如果您可以发布网格的渲染 html，将会很有帮助。

【参考方案2】：

试试这个...

renderer : function(value, meta) 
    if(parseInt(value) > 0) 
        meta.style = "background-color:green;";
     else 
        meta.style = "background-color:red;";
    
    return value;

它对我有用。

【讨论】：

也适用于我，除非您需要添加“返回值”，否则您将得到一个空列。

【参考方案3】：

参考这些例子

Ext.onReady(function()
    Ext.create('Ext.data.Store', 
        storeId:'simpsonsStore',
        fields:['name', 'email', 'change'],
        data:'items':[
             'name': 'Lisa',  "email":"[e-mail]",  "change":100  ,
             'name': 'Bart', "email":"[e-mail]", "change":-20  ,
             'name': 'Homer', "email":"[e-mail]",  "change":23   ,
             'name': 'Marge', "email":"[e-mail]", "change":-11   
        ],
        proxy: 
            type: 'memory',
            reader: 
                type: 'json',
                root: 'items'
            
        
    );

    Ext.create('Ext.grid.Panel', 
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
             header: 'Name',  dataIndex: 'name' ,
             header: 'Email', dataIndex: 'email', flex: 1 ,
             header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' 
        ],
        height: 200,
        width: 400,
        viewConfig: 
            getRowClass: function(record, index) 
                var c = record.get('change');
                if (c < 0) 
                    return 'price-fall';
                 else if (c > 0) 
                    return 'price-rise';
                
            
        ,
        renderTo: Ext.getBody()
    );
);

CSS：

.price-fall .x-change-cell 
    background-color: #FFB0C4;
    color:red;

.price-rise .x-change-cell 
    background-color: #B0FFC5;
    color:green;

【讨论】：

这些值来自商店，所以我没有改变任何东西。但对于进一步的用例，它会很有用！

【参考方案4】：

灵感来自 Select Smile... 这对我有用：

    var myRender = function (value, metaData, record, rowIndex, colIndex, store, view) 
        if (parseInt(value) < 0) 
            metaData.attr = 'style="background-color:#ffaaaa !important;"';
        
        return value
    ;

和领域

id: 'dta', dataIndex: 'days_to_arrival', renderer: myRender

就是这样。

ps。在 ExtJS v2.2.1 下完成

【参考方案5】：

renderer: function (value, metaData) 
    if (parseInt(value) > 0) 
        metaData.tdStyle = 'background-color:#ffaaaa';
    
    return value

【讨论】：

即使你的代码解决了OP问题，还是建议在你的代码sn-p中添加一些描述性文字。

【参考方案6】：

你可以像这样在类中设置样式：

js:

columns: 
        items: [
           
                ...
                innerCls: 'column-ltr',

           ]

css：

.column-ltr
   direction :rtl;