Extjs根据条件设置表格某行背景色示例
话不多说，贴上代码
html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../extjs3/resources/css/ext-all.css" rel="external nofollow" />
<script type="text/javascript" src="../extjs3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs3/ext-all.js"></script>
<script type="text/javascript" src="array-grid.js"></script>
<style type="text/css">
.<span style="font-family: Arial, Helvetica, sans-serif;">my_row_class</span><span style="font-family: Arial, Helvetica, sans-serif;">{ background:gray;}</span>
</style>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
js代码,其中应-----隔开的代码即为关键代码，自己分析吧：
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
function pctChange(val) {
if (val > 0) {
return '<span style="color:green;">' + val + '%</span>';
} else if (val < 0) {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company'
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
},
{
header : 'Change',
width : 75,
sortable : true,
renderer : change,
dataIndex: 'change'
},
{
header : '% Change',
width : 75,
sortable : true,
renderer : pctChange,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],viewConfig : {forceFit:true
//------------------------------------------------
,getRowClass : function(record,rowIndex,rowParams,store){
if("3m Co"==record.get('company')){
return 'my_row_class';
}
}
//------------------------------------------------
},
stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
});
-
pre { white-space: pre-wrap; } 本教程将向您展示如何根据一些条件改变数据网格（datagrid）组件的行样式。当 listprice 值大于 50 时，我们将为该行设置不同的颜色。 数据网格（datagrid）的 rowStyler 函数的设计目的是允许您自定义行样式。以下代码展示如何改变行样式： <table id="tt" title="DataGrid
-
我对Java，JSTL，CSS，JSP······任何与Java相关的和web应用程序世界。同时我也在学习和制作自己的web程序（使用Spring MVC）。 （我的桌子越来越大） 是的，[Q2]是错的，有什么建议吗？感谢！
-
通过RGB值设置背景的颜色。 默认的颜色是 0x000000： // 颜色的参数可以是字符串 "#530000" 或者是十六进制数值 0x530000 controller.setBackgroundColor("#530000); //controller.setBackgroundColor(0x530000);
-
我是瓦丁开发公司的新人，我希望有人能帮助我。我刚刚用模型创建了一个网格表，一切都很好。但是现在，我想改变选定行的背景颜色。我想，我必须创造一个主题。我在瓦丁论坛上发现了这个：https://vaadin.com/forum/thread/17867059/how-to-set-selected-row-opacity-in-vaadin-grid 这是我已经做过的： 我用链接中的代码创建了一个ht
-
问题内容： 当我尝试使用以下命令在Vim 中或直接在Vim中更改背景色时： …完全不影响我的背景。该选项也没有。但是，当我运行gvim时看起来还可以。 有没有一种方法可以在Vim中更改背景而不更改我的Konsole设置？ 编辑 好的，guifg / guibg和ctermfg / ctermbg之间是有区别的。虽然GUI接受许多不同的颜色组合，但是cterm仅允许很少的标准颜色组合。 问题答案：
-
问题内容： 我正在使用Nimbus外观。我需要在JTabbedPane中更改选项卡的背景色和前景色，但在JTabbedPane中未设置颜色。我尝试了setForeground（），setForegroundAt（），setBackground（）和setBackgroundAt（）方法，但没有用。这是我的代码 } 问题答案： 您可以执行几项不同的操作，具体取决于您希望对确切颜色进行多少控制。最简单