话不多说,贴上代码
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\'); });
本文地址:https://www.stayed.cn/item/1946
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我