Heim > Artikel > Web-Frontend > Extjs legt die Hintergrundfarbe einer bestimmten Zeile einer Tabelle basierend auf Conditions_extjs fest

Extjs legt die Hintergrundfarbe einer bestimmten Zeile einer Tabelle basierend auf Conditions_extjs fest

WBOYOriginal: 2016-05-16 16:41:121216Durchsuche

Lassen Sie uns ohne weitere Umschweife den Code veröffentlichen

HTML-Code:

<!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-Code, der durch ----- getrennte Code ist der Schlüsselcode. Analysieren Sie ihn selbst:

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispiel für die JSON-Analysemethode von jquery: Einführung_jqueryNächster Artikel：Beispiel für die JSON-Analysemethode von jquery: Einführung_jquery

In Verbindung stehende Artikel

Mehr sehen