Without further ado, post the code
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, where the separated code is the key code, analyze it yourself:
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'], ['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/jh: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'); });