PDA

View Full Version : Apply background color to Grid summary row



qt4x11
18 Jan 2012, 9:54 AM
My grid class is below, I'm using Ext.grid.feature.Summary to display a summary row at the bottom of the grid with various sums, averages and calculated values. I use summaryRenderer for each column to apply styling to the summary values. Is there a way to apply background color to the entire summary row? setting something like


background-color:#cbcbcb;


to the various summary renderers does not seem to work very well, as it applies a background to the summary value itself and not to the entire grid column. Any advice appreciated.







Ext.define('Ext.reports.CompanyCustomerSummaryGrid', {
extend : 'Ext.grid.GridPanel',
alias : 'widget.reports-companyCustomerSummaryGrid',


title : 'Customer Interaction Summary',
xtype : 'grid',
itemId : 'ccsGrid',
features : [{
ftype : 'summary'
}],


initComponent : function() {
this.columns = [{
dataIndex : 'stationDescriptor',
header : '',
sortable : true,
flex : 1,
summaryRenderer : function(value, summaryData, dataIndex) {
return '<span style="font-weight:bold;"></span>';
}
}, {
dataIndex : 'numberOfRequests',
header : 'Agent Requests',
sortable : true,
flex : 1,
summaryType : 'sum',
field : 'numberOfRequests',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'numberOfRequestsNoWait',
header : 'Answered Without Wait',
sortable : true,
flex : 1,
summaryType : 'sum',
field : 'numberOfRequestsNoWait',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'pctNumberOfRequestsNoWait',
header : '',
sortable : true,
flex : 1,
renderer : pctg,
summaryType : 'average',
field : 'pctNumberOfRequestsNoWait',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="color:green; font-weight:bold;">' + pct + "%</span>";
}
}, {
dataIndex : 'numberOfRequestsWait',
header : 'Answered After Wait',
sortable : true,
flex : 1,
summaryType : 'sum',
field : 'numberOfRequestsWait',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'pctNumberOfRequestsWait',
header : '',
sortable : true,
flex : 1,
renderer : pctg,
summaryType : 'average',
field : 'pctNumberOfRequestsWait',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="color:green; font-weight:bold;">' + pct + "%</span>";
}
}, {
dataIndex : 'numberOfRequestsLost',
header : 'Abandoned',
sortable : true,
flex : 1,
summaryType : 'sum',
field : 'numberOfRequestsLost',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'pctNumberOfRequestsLost',
header : '',
sortable : true,
flex : 1,
renderer : pctg,
summaryType : 'average',
field : 'pctNumberOfRequestsLost',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="color:green; font-weight:bold;">' + pct + "%</span>";
}
}, {
dataIndex : 'numberOfRequestsNotStaffed',
header : 'Not Staffed',
sortable : true,
flex : 1,
summaryType : 'sum',
field : 'numberOfRequestsNotStaffed',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'pctNumberOfRequestsNotStaffed',
header : '',
sortable : true,
flex : 1,
renderer : pctg,
summaryType : 'average',
field : 'pctNumberOfRequestsNotStaffed',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="color:green; font-weight:bold;">' + pct + "%</span>";
}
}, {
dataIndex : 'avgWaitTimeWaitString',
header : 'Average Wait',
sortable : true,
flex : 1,
summaryType : 'average',
field : 'pctNumberOfRequestsNotStaffed',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'avgWaitTimeNoWaitString',
header : 'Average Agent Response',
sortable : true,
flex : 1,
summaryType : 'average',
field : 'pctNumberOfRequestsNotStaffed',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}, {
dataIndex : 'avgInteractionTime',
header : 'Average Call Duration',
sortable : true,
flex : 1,
summaryType : 'average',
field : 'pctNumberOfRequestsNotStaffed',
summaryRenderer : function(value, summaryData, dataIndex) {
var pct = parseInt(value);
return '<span style="font-weight:bold;">' + pct + "</span>";
}
}];


this.store = Ext.create('Ext.data.Store', {
model : 'Ext.reports.CompanyCustomerSummaryModel',
root : {
expanded : true
},
proxy : {
type : 'ajax',
url : 'http://10.0.0.9:8005/ReportServlet?companyID=3&action=companyCustomerSummaryReport'
},
folderSort : true,
autoLoad : true
});


this.callParent(arguments);
}


});

mitchellsimoens
18 Jan 2012, 10:10 AM
Do it in CSS:


.x-grid-row-summary {
background-color: #f00;
}

qt4x11
18 Jan 2012, 10:36 AM
Thanks, it's working great.

amdtuv
24 Jul 2013, 6:40 AM
It's not working any more with ExtJS 4.2.1.