【Extjs】Extjs根据条件设置表格某行背景色示例-背景色

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【Extjs根据条件设置表格某行背景色示例】，下面是详细的讲解！

Extjs根据条件设置表格某行背景色示例

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'] 
]; 

 
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; 
} 

 
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'); 
});

关于Extjs根据条件设置表格某行背景色示例的用户互动如下：

　　相关问题：怎样给表格的某一行设置背景色

　　答：选中需要填充颜色的表格，然后点击填充颜色按钮就可以啦， >>详细

　　相关问题：在EXCEL表格中，怎样根据某个单元格的数值来设置它...

　　答：举例说明 如下图，要求单元格中的数值大于42，其填充颜色自动变为红色 1、选中全部单元格，依次点击“开始-条件格式-新建规则” 2、在弹出的小窗口中选择第二行即“只为包含以下内容的单元格设置格式” 按下图设置条件 确认即可，效果如下图 >>详细

　　相关问题：extjs的grid控件怎么根据值来设置某行的背景颜色

　　答： 有做过类似的效果， 例子是基于Extjs4.1,可以参考下 viewConfig: { enableTextSelection: 'true', getRowClass:function(record, index, rowParams, store){ return record.get('change')>0?"row-s":"row-f"; } }原文链接：http://joyliu.org/b... >>详细