要更改整行背景颜色,我们可以使用getRowClass,但是如何只对一个单元格和特定列执行相同的逻辑....任何想法?
//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'}
...
但这种方式网格在从白色到彩色背景的变化中变形...... ???
还有其他想法吗?
修改
自定义css应用于列后,如何在短时间内删除它,所以当值更改时,它会显示闪烁一次?像setTimeout("remove-css()",1000);
或Ext.Function.defer(remove-css, 1000);
一样的东西
有什么想法吗?
答案 0 :(得分:35)
我建议使用getRowClass
将额外的cls应用于所需的列:
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';
}
}
},
// ...
});
.price-fall .x-change-cell {
background-color: #FFB0C4;
color:red;
}
.price-rise .x-change-cell {
background-color: #B0FFC5;
color:green;
}
这是demo。
答案 1 :(得分:11)
当我做另一件事时,我还发现了另一种方法;
在列定义中:
{
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
,则会将其添加到道明的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。
答案 2 :(得分:2)
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;
},