Home > Developer > JavaScript
Extjs sets the background color of a row in the table based on the conditions. extjs example
Paste the code.
Html code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">JavaScript code, which should be separated by the following code:
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'); });
Extjs sets the background color of the table.{
Header: 'item name ',
DataIndex: 'name ',
Renderer: function (value, meta, rec, row, col ){
Var val = '<div style = "background: #92D050;">' + value + '</div> ';
Return val;
}
How can I set the background color of a row based on the value of the grid Control of extjs?Configure getRowClass in viewConfig, for example:
First customize a CSS:
<Style type = "text/css">
. My_row_Red table {background: Red}
</Style>
Then write in GridPanel as follows:
Var QueryGrid = new Ext. grid. GridPanel ({
Frame: true,
RenderTo: document. getElementById ("QueryGrid "),
EnableColumnHide: false,
Columns :[
{Header: 'name', sortable: true, dataIndex: 'name '},
{Header: 'gender', dataIndex: 'sex '},
{Header: 'age', dataIndex: 'age '}
],
Store: JQueryStore,
LoadMask: true,
ViewConfig: {forceFit: true, sortAscText: 'position', sortDescText: 'descending Order ', getRowClass: function (record, rowIndex, rowParams, store ){
If (record. data. Sex = "1 "){
Return 'my _ row_Red ';
}}
}
})
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
