Results 1 to 5 of 5

Thread: Apply style to Grid column - Custom renderer not defined

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Answers
    1

    Default Answered: Apply style to Grid column - Custom renderer not defined

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

  2. 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

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    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
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Answers
    1

    Default

    Quote Originally Posted by mitchellsimoens View Post
    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?
    Code:
    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
            });

  5. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    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.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  6. #5
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Answers
    1

    Default

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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •