1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Vote Rating
    0
    Answers
    1
    qt4x11 is on a distinguished road

      0  

    Default Answered: Apply background color to Grid summary row

    Answered: Apply background color to Grid summary row


    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.




    Code:
    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);
    	}
    
    
    });

  2. Do it in CSS:

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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Do it in CSS:

    Code:
    .x-grid-row-summary {
        background-color: #f00;
    }
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Vote Rating
    0
    Answers
    1
    qt4x11 is on a distinguished road

      0  

    Default


    Thanks, it's working great.

  5. #4
    Sencha User
    Join Date
    Jun 2012
    Posts
    5
    Vote Rating
    0
    amdtuv is on a distinguished road

      0  

    Default


    It's not working any more with ExtJS 4.2.1.

Thread Participants: 2

Tags for this Thread