View Full Version : How to add a custom renderer dinamically to a PropoertyGrid?

14 Jul 2014, 11:06 PM
Hello everyone,

I need to display an image in a PropertyGrid. This is usually achieved using the customRenderers config, explicitly overriding the renderer for a specific field:

grid = new Ext.grid.PropertyGrid({
customRenderers: {
"picture": function(v)
return "<img src=\"" + feature.attributes["picture"] + "\" />";

But in my case the field on which to apply the custom rendering function is only known at run-time (I have to search for a string like "http:"). But adding the custom renderer dynamically at that time does no seem to work.

Is there any way to do this? Thank you.

16 Jul 2014, 11:11 AM
Have you tried changing the customRenderers and then using setSource?

17 Jul 2014, 12:03 AM
After trying a great deal of different strategies I finally got to something that functions:

grid = new Ext.grid.PropertyGrid();
for (var key in feature.attributes) {
value = feature.attributes[key];
if ((value != null) && (value.substring(0, 4) == "http"))
grid.customRenderers[key] = Function("v", "return \"<img src=\\\"" + value + "\\\" />\";");

The feature.attributes property is a dictionary containing the data to be displayed; a cycle iterates through each of its keys, searching for the fields that might contain image URLs.

There were two key elements that brought me to this solution:

Understanding that customRenderers can be used itself as a dictionary, thus dispensing the hard-coding of fields names.
The usage of Function as a means to encode the exact value to be rendered, this way avoiding any scope issues.