我要评论话不多说，贴上代码
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');
});
发表评论