想要实现图片中的效果:
主要代码:
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