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?