Extjs根据条件设置表格某行背景色示例
话不多说,贴上代码
html代码:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <linkrel="stylesheet"type="text/css"href="../extjs3/resources/css/ext-all.css"rel="externalnofollow"/> <scripttype="text/javascript"src="../extjs3/adapter/ext/ext-base.js"></script> <scripttype="text/javascript"src="../extjs3/ext-all.js"></script> <scripttype="text/javascript"src="array-grid.js"></script> <styletype="text/css"> .<spanstyle="font-family:Arial,Helvetica,sans-serif;">my_row_class</span><spanstyle="font-family:Arial,Helvetica,sans-serif;">{background:gray;}</span> </style> </head> <body> <divid="grid-example"></div> </body> </html>
js代码,其中应-----隔开的代码即为关键代码,自己分析吧:
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.state.Manager.setProvider(newExt.state.CookieProvider()); //samplestaticdataforthestore varmyData=[ ['3mCo',71.72,0.02,0.03,'9/112:00am'], ['3mCo',71.72,0.02,0.03,'9/112:00am'], ['AlcoaInc',29.01,0.42,1.47,'9/112:00am'], ['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'], ['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'], ['AltriaGroupInc',83.81,0.28,0.34,'9/112:00am'], ['Wal-MartStores,Inc.',45.45,0.73,1.63,'9/112:00am'] ]; /** *Customfunctionusedforcolumnrenderer *@param{Object}val */ functionchange(val){ if(val>0){ return'<spanstyle="color:green;">'+val+'</span>'; }elseif(val<0){ return'<spanstyle="color:red;">'+val+'</span>'; } returnval; } /** *Customfunctionusedforcolumnrenderer *@param{Object}val */ functionpctChange(val){ if(val>0){ return'<spanstyle="color:green;">'+val+'%</span>'; }elseif(val<0){ return'<spanstyle="color:red;">'+val+'%</span>'; } returnval; } //createthedatastore varstore=newExt.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'} ] }); //manuallyloadlocaldata store.loadData(myData); //createtheGrid vargrid=newExt.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:'LastUpdated', width:85, sortable:true, renderer:Ext.util.Format.dateRenderer('m/d/Y'), dataIndex:'lastChange' } ],viewConfig:{forceFit:true //------------------------------------------------ ,getRowClass:function(record,rowIndex,rowParams,store){ if("3mCo"==record.get('company')){ return'my_row_class'; } } //------------------------------------------------ }, stripeRows:true, autoExpandColumn:'company', height:350, width:600, title:'ArrayGrid', //configoptionsforstatefulbehavior stateful:true, stateId:'grid' }); //renderthegridtothespecifieddivinthepage grid.render('grid-example'); });