1

我对 ext-js 很陌生。

我有一个容器网格，我需要做的是：如果一行中 2 列之间的差异大于 2，则该行应该是红色的。

我不知道该怎么做。

columns: [
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'val_1',
                                                text: 'val_1'
                                            },
                                            {
                                                xtype: 'gridcolumn',
                                                dataIndex: 'val_2',
                                                text: 'val_2'
                                            }
4

3 回答 3

1

试试这个例子

Ext.onReady(函数(){

var store = Ext.create('Ext.data.ArrayStore', {

字段：['价格'，'更改']，

数据： [

[0, 0],

[2, 3],

[0, 1],

[2, 3],

[5, 6],

[0,0]

]

});

var grid = Ext.create('Ext.grid.Panel', {

标题：'阵列网格'，

商店：商店，

列： [

{文本：'价格'，宽度：75，数据索引：'价格'}，

{文本：'更改'，宽度：75，dataIndex：'更改'}

],

视图配置：{

stripeRows: false,

getRowClass: function(record) { 

    return record.get('price')+record.get('change') > 2 ? 'change-row-color':'';  

    } 

},

身高：200，

宽度：200，

renderTo: Ext.getBody()

});

});

CSS：

.change-row-color .x-grid-cell {

背景颜色：#ffe2e2；

颜色：#900；

}

于 2013-08-08T10:19:32.200 回答
1

使用getRowClass方法：

覆盖此函数以在呈现期间将自定义 CSS 类应用于行。此函数应返回将添加到行的包装 div 的 CSS 类名称（或空字符串 '' 表示无）。要应用多个类名，只需在字符串中返回以空格分隔的它们（例如，'my-class another-class'）。示例用法：

 viewConfig: {
     getRowClass: function(record, rowIndex, rowParams, store){
         return record.get("valid") ? "row-valid" : "row-error";
     } }
于 2013-08-01T11:20:50.837 回答
0

您需要使用 TemplateColumn

function getDivForHighlightOnDiff2(x,y,text) {
    var highlighter = "";
    if (Math.abs(x-y) > 2) {
        highlighter = 'class="shinyRed"';
    }
    return '<div '+highlighter+'>'+text+x+'</div>';
}

highlightOnDiff2Template1= "{[getDivForHighlightOnDiff2(values.val_1, values.val_2,'val_1')]}"
highlightOnDiff2Template1 = "{[getDivForHighlightOnDiff2(values.val_2, values.val_1,'val_2')]}"

columns: [
{
    xtype: 'templatecolumn',
    tpl: highlightOnDiff2Template1
},
{
    xtype: 'templatecolumn',
    tpl: highlightOnDiff2Template2
}
于 2013-08-01T13:31:29.923 回答