PDA

View Full Version : Apply style to Grid column - Custom renderer not defined



qt4x11
17 Jan 2012, 8:53 AM
I'm trying out different ways to apply styling to Grid columns. I've applied styling successfully by giving a column an id, then referencing that id in a css file using the id in a css class name such as


.x-grid-table .x-grid-cell-pctNumberOfRequestsNoWait {color:green;}


You can see 3 columns with styling applied successfully in my code below using id and css. I wanted to try defining a custom renderer and then apply styling to an individual column using renderer: myrenderer. I've attempted to do this with the pctNumberOfRequestsNoWait column in the code below. This does not work. I get an error in developer console


Uncaught ReferenceError: myrenderer is not defined


I'm probably not defining my custom renderer correctly, but I've tried several different ways and this is the only way that does not generate js syntax errors in my IDE. Any ideas on how I can get my custom renderer to work?


Thank you!



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


title : 'Customer Interaction Summary',
xtype : 'grid',
itemId : 'ccsGrid',

myrenderer: function(value) {
return '<span style="color:green;">' + value + '</span>';
},

columns : [{
dataIndex : 'stationDescriptor',
header : '',
sortable : true,
flex : 1
}, {
dataIndex : 'numberOfRequests',
header : 'Agent Requests',
sortable : true,
flex : 1
}, {
dataIndex : 'numberOfRequestsNoWait',
header : 'Answered Without Wait',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsNoWait',
header : '',
sortable : true,
flex : 1,
renderer: myrenderer
}, {
dataIndex : 'numberOfRequestsWait',
header : 'Answered After Wait',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsWait',
header : '',
sortable : true,
flex : 1,
itemId: 'pctNumberOfRequestsWait'
}, {
dataIndex : 'numberOfRequestsLost',
header : 'Abandoned',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsLost',
header : '',
sortable : true,
flex : 1,
itemId: 'pctNumberOfRequestsLost'
}, {
dataIndex : 'numberOfRequestsNotStaffed',
header : 'Not Staffed',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsNotStaffed',
header : '',
sortable : true,
flex : 1,
id: 'pctNumberOfRequestsNotStaffed'
}, {
dataIndex : 'avgWaitTimeWaitString',
header : 'Average Wait',
sortable : true,
flex : 1
}, {
dataIndex : 'avgWaitTimeNoWaitString',
header : 'Average Agent Response',
sortable : true,
flex : 1
}, {
dataIndex : 'avgInteractionTime',
header : 'Average Call Duration',
sortable : true,
flex : 1
}],

initComponent : function() {
Ext.define('CompanyCustomerSummary', {
extend : 'Ext.data.Model',
fields : [{
name : 'avgInteractionTimeWait',
type : 'string'
}, {
name : 'stationDescriptor',
type : 'string'
}, {
name : 'numberOfRequestsNoWait',
type : 'string'
}, {
name : 'stationID',
type : 'string'
}, {
name : 'numberOfRequestsNoWaitForResponseTime',
type : 'string'
}, {
name : 'numberOfRequests',
type : 'string'
}, {
name : 'avgInteractionTime',
type : 'string'
}, {
name : 'avgInteractionTimeWaitString',
type : 'string'
}, {
name : 'avgInteractionTimeNoWaitString',
type : 'string'
}, {
name : 'numberOfRequestsWait',
type : 'string'
}, {
name : 'numberOfRequestsLost',
type : 'string'
}, {
name : 'numberOfRequestsNotStaffed',
type : 'string'
}, {
name : 'avgInteractionTimeNoWait',
type : 'string'
}, {
name : 'pctNumberOfRequestsNoWait',
type : 'string'
}, {
name : 'pctNumberOfRequestsWait',
type : 'string'
}, {
name : 'pctNumberOfRequestsLost',
type : 'string'
}, {
name : 'pctNumberOfRequestsNotStaffed',
type : 'string'
}, {
name : 'avgWaitTimeWaitString',
type : 'string'
}, {
name : 'avgWaitTimeNoWaitString',
type : 'string'
}]
});


this.store = Ext.create('Ext.data.Store', {
model : 'CompanyCustomerSummary',
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
17 Jan 2012, 9:03 AM
Two things... you shouldn't use Ext.define within a class like you are doing, this needs to have it's own file and live outside any class.

You should define your columns in a method and then you can access this.myrenderer

qt4x11
17 Jan 2012, 9:30 AM
Two things... you shouldn't use Ext.define within a class like you are doing, this needs to have it's own file and live outside any class.

You should define your columns in a method and then you can access this.myrenderer

Thank you. I just wanted to clarify - you mean this code inside of initComponent should be in its own file such as CompanyCustomerSummaryModel and/or CompanyCustomerSummaryStore?

Ext.define('CompanyCustomerSummary', {
extend : 'Ext.data.Model',
fields : [{
name : 'avgInteractionTimeWait',
type : 'string'
}, {
name : 'stationDescriptor',
type : 'string'
}, {
name : 'numberOfRequestsNoWait',
type : 'string'
}, {
name : 'stationID',
type : 'string'
}, {
name : 'numberOfRequestsNoWaitForResponseTime',
type : 'string'
}, {
name : 'numberOfRequests',
type : 'string'
}, {
name : 'avgInteractionTime',
type : 'string'
}, {
name : 'avgInteractionTimeWaitString',
type : 'string'
}, {
name : 'avgInteractionTimeNoWaitString',
type : 'string'
}, {
name : 'numberOfRequestsWait',
type : 'string'
}, {
name : 'numberOfRequestsLost',
type : 'string'
}, {
name : 'numberOfRequestsNotStaffed',
type : 'string'
}, {
name : 'avgInteractionTimeNoWait',
type : 'string'
}, {
name : 'pctNumberOfRequestsNoWait',
type : 'string'
}, {
name : 'pctNumberOfRequestsWait',
type : 'string'
}, {
name : 'pctNumberOfRequestsLost',
type : 'string'
}, {
name : 'pctNumberOfRequestsNotStaffed',
type : 'string'
}, {
name : 'avgWaitTimeWaitString',
type : 'string'
}, {
name : 'avgWaitTimeNoWaitString',
type : 'string'
}]
});


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

mitchellsimoens
17 Jan 2012, 9:36 AM
The model should be in it's own file. You would be redefining the model for every instance and for maintenance, you would have to hunt down this model if you ever needed to change it.

qt4x11
17 Jan 2012, 3:18 PM
Thank you! I have a separate Model class and my custom renderer works now.

Fyi my code now looks like (I have moved my renderer to another file)


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


title : 'Customer Interaction Summary',
xtype : 'grid',
itemId : 'ccsGrid',


initComponent : function() {
this.columns = [{
dataIndex : 'stationDescriptor',
header : '',
sortable : true,
flex : 1
}, {
dataIndex : 'numberOfRequests',
header : 'Agent Requests',
sortable : true,
flex : 1
}, {
dataIndex : 'numberOfRequestsNoWait',
header : 'Answered Without Wait',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsNoWait',
header : '',
sortable : true,
flex : 1,
renderer : pctg
}, {
dataIndex : 'numberOfRequestsWait',
header : 'Answered After Wait',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsWait',
header : '',
sortable : true,
flex : 1,
renderer : pctg
}, {
dataIndex : 'numberOfRequestsLost',
header : 'Abandoned',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsLost',
header : '',
sortable : true,
flex : 1,
renderer : pctg
}, {
dataIndex : 'numberOfRequestsNotStaffed',
header : 'Not Staffed',
sortable : true,
flex : 1
}, {
dataIndex : 'pctNumberOfRequestsNotStaffed',
header : '',
sortable : true,
flex : 1,
renderer : pctg
}, {
dataIndex : 'avgWaitTimeWaitString',
header : 'Average Wait',
sortable : true,
flex : 1
}, {
dataIndex : 'avgWaitTimeNoWaitString',
header : 'Average Agent Response',
sortable : true,
flex : 1
}, {
dataIndex : 'avgInteractionTime',
header : 'Average Call Duration',
sortable : true,
flex : 1
}];


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


});